我们可以在<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. effective c++ 条款18 make interface easy to use correctly and hard to use incorrectly

    举一个容易犯错的例子 class Date { private: int month; int day; int year; public: Date(int month,int day,int ye ...

  2. android数据访问模式:档、SharedPreferences

    android数据访问模式:档.SharedPreferences.SQLite 数据库.Content provider 文件流: 使用java IO流对文件进行读写操作,文件权限默认. 指定文件权 ...

  3. 揭秘传智播客毕业班的超级薪水7k内幕系列II----Offer工资表5.7k,为什么不能让老师就业就业

    在上海传智播客宋学生Java六期学员.在班级尚未毕业阶段,私自投递简历,而且逃课去面试,获得某国企的Offer.入职薪资5.7K,,兼有五险一金.饭补等齐全福利,因就业老师要求班级同学未毕业不要急于就 ...

  4. 杭电1171 Big Event in HDU(母函数+多重背包解法)

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  5. 用PowerDesigner生成自定义建表语句

    原文:用PowerDesigner生成自定义建表语句 我们经常用PowerDesigner来进行数据库表结构的设计,并且设计出来的表比较直观的看出之间的相互关系,方便理解:但其自动生成的脚本并不一定符 ...

  6. 【iOS发展-61】更换plist经过资源,执行iOS一旦数据仍显示在模拟器的外观,如何解决?

    (1)案例介绍 --我们首先导入plist文件做项目,模拟的观看效果. --删除plist,更换一个新的plist,CMD+R模拟执行,或者找到该程序界面上显示最后一个数据. (2)原因 是由于第一次 ...

  7. RedHat Linux乱码解决方案(转)

    RedHat Linux中出现中文乱码主要是由于没有安装中文字体,因此解决方案主要是安装中文字体,所以 第一步,挂载安装的光盘 在虚拟机的菜单栏里,选择:VM->Settings,点击Setti ...

  8. 最少拦截系统(杭电1257)(DP)+(贪心)

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  9. 【Android进阶】ZXing android 错误(Could not find class 'com.google.zxing.ResultPoint)

    解决方法: 1.右键工程Build path, java build path,选择libraries 在右边的按钮中点击"Add Library" 选择"User li ...

  10. python基础课程_学习笔记26:编程的乐趣

    编程的乐趣 编程柔术 当你坐下来,打算如何组织计划要定时,具体程序,然而,无论什么经验.在实现时间的函数的,你会逐渐学会了原来的设计,实用的新知识.我们不应该忽视沿途汲取的教训,相反,它们用于其他设计 ...