我们可以在<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. Oracle的海量存储技术

    下午去參加一个Oracle有关海量数据存储技术的培训讲座了. 地址在广州市林和西路101号天河区计经大楼西側三楼. 培训发起机构为:广州中睿信息技术有限公司. 以下就简要总结一下所听到的一些东西,也算 ...

  2. 【Web探索之旅】第一部分:什么是Web?

    内容简介 1.Web探索之旅:开宗明义 2.第一部分第一课:什么是Web? 3.第一部分第二课:Web,服务和云 4.第一部分第三课:Web的诞生史 Web探索之旅:开宗明义 大家好. 我们这个系列课 ...

  3. SQL Server 版本号汇总

    通过SSMS连接Sql servr,查看实例的版本就能知道当前SQL Server的版本号了.   RTM (no SP) SP1 SP2 SP3 SP4  SQL Server 2014     c ...

  4. [渣译文] SignalR 2.0 系列: SignalR简介

    原文:[渣译文] SignalR 2.0 系列: SignalR简介 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ...

  5. Metatable和Metamethod(转)

    Metatable和Metamethod是用来干啥的?它们可以使得表a和b的表达式“a + b”变得有意义,其中metatable使两个不相关的表a和b之间可以进行操作,而操作的具体行为比如说&quo ...

  6. Visual Studio 2015 中文企业版及专业版 正式版下载地址 激活秘钥 正版key

    Visual Studio 简体中文企业版 2015 (x86 and x64)文件名 cn_visual_studio_enterprise_2015_x86_x64_dvd_6846222.iso ...

  7. 【Android基础】短信的发送

    //Button的点击事件 @Override public void onClick(View v) { // 接受者电话号码 Uri uri = Uri.parse("smsto:123 ...

  8. SDUTOJ 1298 活动选择

    #include<iostream> #include<memory.h> using namespace std; int a[105],b[105],c[105],d[10 ...

  9. hive内置函数大全

    ====================================== 一.关系函数 1.等值比較:=     语法:A=B 操作类型:全部基本类型 2.不等值比較:<>     语 ...

  10. 【iOS】Web Color 的 Swift 实现

    用Swift语言重写Web Color这个类. 这次是用函数实现的,感觉也非常简洁.眼下(2014.6.28) Xcode 6的方法提示还不健全,就仅仅实现了用颜色名字创建颜色的功能. 最新代码&am ...