我们可以在<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,进行赋值!

真的很有意思!

当<script>中的type等于text/html的妙用的更多相关文章

  1. 区别script中的type=”text/javascript”和language=”Javascript”

    内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language=&qu ...

  2. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

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

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

  4. JavaScript的type属性等于text/html 例子

    在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...

  5. <script>中的代码

    <script type="text/javascript"> $(document).ready(function () { $.formValidator.init ...

  6. 当target属性在XHTML script中无效时

    <a href="#" target=_blank></a>target此属性能够使链接在新窗口打开,但是在XHTML script中无效时. 那么解决方案 ...

  7. script标签的type="test/html"时

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

  8. Java script 中的面向对象1

    Java script 中的面向对象 对象 对象是Javascript的基本数据类型,对象是一种复合值,将很多的键值对聚合在一起使用.对象可看做是属性的无序集合,每个属性都是一个名/值对.属性名其实是 ...

  9. JSP中 input type 用法

    JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...

随机推荐

  1. js右侧悬浮框

    示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...

  2. Gradle cookbook(转)

    build.gradle apply plugin:"java" [compileJava,compileTestJava,javadoc]*.options*.encoding ...

  3. windows API与C#的数据类型对应关系表

    API与C#的数据类型对应关系表 API数据类型 类型描述 C#类型 API数据类型 类型描述 C#类型 WORD 16位无符号整数 ushort CHAR 字符 char LONG 32位无符号整数 ...

  4. [渣译文] SignalR 2.0 系列:SignalR的高频实时通讯

    原文:[渣译文] SignalR 2.0 系列:SignalR的高频实时通讯 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  5. IDEA内存异常问题

    设置工程运行Server  VM属性 VM options:   -Xms258m -Xmx1024m -XX:PermSize=128m -XX:MaxPermSize=256m    如图 :

  6. 初步STL集装箱Vector

    vector 特点: 1.可变长的动态数组 2.使用时包括头文件 #include <vector> 3.支持随机訪问迭代器 • 依据下标随机訪问某个元素时间为常数 • 在尾部加入速度非常 ...

  7. 跨域 Iframe 通信解决方案(兼容 IE 系列浏览器。)

    实现思路: 1.postMessage(IE8+, Firefox 3.1+, Opera 9+, Safari, and Chrome) 2.利用window.navigator共享信息,使支持IE ...

  8. HDU 1988 Cube Stacking (数据结构-并检查集合)

    Cube Stacking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 18834   Accepted: 6535 Ca ...

  9. Arduino 数码管LED驱动器 阵列方法

    样品谈到最后一个驱动程序LED数码管,采用了最简单的解决方案之一,对于每一个LED高低电平控制,这样的好处是每个LED控制可检.避免短路造成的错觉,因为,但是对于数字的变化是,它是多余的写,因此,这种 ...

  10. 使用python+flask让你自己api(教程源代码)

    1.背景 ok,这可能是很多朋友和我一样经常使用的各种api,例facebook的.github的.甚至微信api.因此,很多人都想使自己的api.在线教程在这方面它是非常小的,今天,我做了一个平稳, ...