我们可以在<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. SQL 修改排序规则的问题 sql_latin1_general_cp1_ci_as

    在一个项目中遇到:用原来的数据库生成的脚本,然后部署到新的服务器上,数据库的SQL_Latin1_General_CP1_CI_AS 怎么查询出来汉字都是乱码了. 遂查解决方法. 需要执行这个 ALT ...

  2. Java 的布局管理器GridBagLayout的使用方法(转)

    GridBagLayout是java里面最重要的布局管理器之一,可以做出很复杂的布局,可以说GridBagLayout是必须要学好的的, GridBagLayout 类是一个灵活的布局管理器,它不要求 ...

  3. [渣译文] SignalR 2.0 系列: SignalR 自托管主机

    原文:[渣译文] SignalR 2.0 系列: SignalR 自托管主机 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  4. 左右db_block_size了解和实验

    关于db_block_gets了解和实验 实验 一. 自己手动创建的小表 创建一个区大小为  40k  SYS@ORCL>show parameter db_block_size NAME   ...

  5. Singleton模式(Singleton创建类型)c#简单的例子

    单(Singleton创建模式)c#简单的例子 当需要生成一个实例,可单发模式 样品可以在短短的球员中产生,玩家和测试.单线程例子,如以下: namespace singletonpattern { ...

  6. Android:创建耐磨应用 - 语音操作

    加入语音处理能力(Adding Voice Capabilities) 语音操作为用户体验可穿戴的重要组成部分,它允许用户快速.免提方式来运行操作. Wear它提供了两种类型的语音操作的: 该系统提供 ...

  7. HDU4540+DP

    简单题... dp[ i ][ j ] 表示第 i 行取第 j 个数的MinVal /* DP&简单题 */ #include<stdio.h> #include<strin ...

  8. Android系统APN配置具体解释

     Android 系统APN配置具体解释 这些天一直在调系统原生的Settings.apk里面APN配置的问题.在设置里面手动添加了APN配置选项.可是在界面上还是看不到.所以跟了下代码.原以为就是简 ...

  9. 巧妙设备MTU的大小,轻松提网速

    MTU是什么? "MTU=最大传输单元 单位:字节" 我们在使用互联网时进行的各种网络操作,都是通过一个又一个"数据包"传输来实现的.而MTU指定了网络中可数据 ...

  10. css小技巧,如何制作一个箭头符号

    首先上图: 第一种方法大家可能想到了,就是用背景图片制作箭头符号,但是下面介绍的不是这种方法. 在介绍通过border制作箭头符号之前,先看下下面的css代码: <!DOCTYPE html&g ...