们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:

 1   <script id="commentTemplate" type="text/html">
2 <li>
3 <div class="photo">
4 <a href="#">
5 <img src="[UserImg]" /></a></div>
6 <p>
7 <a href="#">[UserName]:</a><span class="time">[CreateDate]</span></p>
8 <div class="clear">
9 </div>
10 </li>
11 </script>
 1 <div id="comment_ul_2">
2 </div>
3 <input type="button" id="addFun" value="click me" />
4 <script type="text/javascript">
5 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
6 $("#addFun").click(function () {
7 var html = document.getElementById("commentTemplate").innerHTML;
8 var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
9 $("#comment_ul_2").append(source);
10 });
11
12 var zzl = "name:[name]";
13 zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
14 alert(zzl);
15
16 </script>

OK,这个意思是说,当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,这很有意思吧,呵呵!

而其中有一个replace,也很有意思,向在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!

真的很有意思!

欢迎大家来我的新家看一看 3wwang个人博客-记录走过的技术之路

script标签的type="test/html"时的更多相关文章

  1. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  2. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  3. 如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

    Hello, world! 本教程的这一部分内容是关于 JavaScript 语言本身的. 但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择.我们会尽可能少地 ...

  4. 【JavaScript性能优化】------理解Script标签的加载和执行

    1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...

  5. Node.js简易服务器,配合type="module" 实现html文件script标签 ES module引入模块

    相信大家在测试type="module" 在html文件中直接模块化引入 js时,会出现一个跨域问题. 当我们将<script ></scirpt> 标签t ...

  6. 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存

    AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...

  7. 面试小记---外部脚本必须包含 <script> 标签吗?

    外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...

  8. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  9. JavaScript之<script>标签简介

    向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性. 1.async:可选表示应该立即下载 ...

随机推荐

  1. 常用模块:hashlib,subprocess,configparser。

    一  hashlib模块 那么我们前面学习数据类型的时候,也讲了hash,可变类型不可hash:不可变类型可hash. 我们知道hash是一种算法,接收传入的内容经过运算之后得到一个hash值,我们可 ...

  2. Executor框架(二)Executor 与 ExecutorService两个基本接口

    一.Executor 接口简介 Executor接口是Executor框架的一个最基本的接口,Executor框架的大部分类都直接或间接地实现了此接口. 只有一个方法 void execute(Run ...

  3. tcpdump抓sql语句

    -A -n -i any |grep --color 'system_type' -n2 -- -E..,.@.@.f........ ...Ndh-....GP..:A.............. ...

  4. Centos LVM 创建 删除 扩大 缩小

    新建LVM的过程1.使用fdisk 新建分区 修改ID为8e3.使用 pvcreate 创建 PV 4.使用 vgcreate 创建 VG 5.使用 lvcreate 创建 LV 6.格式化LV7.挂 ...

  5. windows自带杀毒防火墙

    windows自带杀毒防火墙 Windows Defender FireWall

  6. VBA 浏览文件夹

    Private Function SelectFolder() As String        With Application.FileDialog(msoFileDialogFolderPick ...

  7. Becoming inspired (2) - ASC 2017 March 25

    Becoming inspired - part 2 @ Advanced Studio Classroom Vol: 2017 MARCH 25 7.Who was I like as a chil ...

  8. C++析构函数的自动调用问题

    首先要明确一点,系统只会自动释放栈内空间,而堆内空间需要用户自己维护. C++中,除了new来的空间存放在堆内,其他均存放在栈中. 当单纯的创建对象的时候,对象存放在栈中,此时在程序块的}后面,系统会 ...

  9. sqlserver分布式 用触发器插入数据

    这个月总公司收购了一家小公司,这家小公司的数据库用的是32位的 Sql2000 ,已经使用很长一段时间了,系统也比较稳定.本着节约成本的原则,总公司保留原公司的一套管理系统,但要求重要数据每天上传到总 ...

  10. How to Pronounce the Word SOMETHING

    How to Pronounce the Word SOMETHING Share Tweet Share Something tells me you’re going to like this v ...