我们可以在<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. C# 5.0 Async函数的提示和技巧

    一.创建Async函数 Async是C# 5.0中新增的关键字,通过语法糖的形式简化异步编程,它有如下三种方式: async Task<T> MyReturningMethod { ret ...

  2. Gradle cookbook(转)

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

  3. 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern)

    原文:乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 解释器模式(Interpreter Pattern) 作 ...

  4. UVA 11774 - Doom&#39;s Day(规律)

    UVA 11774 - Doom's Day 题目链接 题意:给定一个3^n*3^m的矩阵,要求每次按行优先取出,按列优先放回,问几次能回复原状 思路:没想到怎么推理,找规律答案是(n + m) / ...

  5. 连接字符串中Min Pool Size的理解是错误,超时时间已到,但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小。

    Min Pool Size的理解是错误的 假设我们在一个ASP.NET应用程序的连接字符串中将Min Pool Size设置为30: <add name="cnblogs" ...

  6. DOM手术台

    CSS分类 排队: <div id="box" style="width:200px;border:1px solid red color:red;font-siz ...

  7. 【j2ee spring】30、巴巴荆楚网-综合hibernate4+spring4(5)分页

    巴巴荆楚网-综合hibernate4+spring4(5)分页 1.图文项目 2.首先我们引入对应的jar包 3.我们配置一下数据库中对应的实体对象 ProductType.java /** * 功能 ...

  8. 第四-generation音频:互联网智能声音会火

    我把声音分成四个年龄:传统的立体声插头线-蓝牙音响-wifi发出声音-智能声音. 传统的立体声插头线:传统的声音,您必须使用电缆和其他输入源.这样的声音是现在市场上最流行的音频上. 蓝牙音响:蓝牙无线 ...

  9. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

  10. 12本最优秀的Android开发电子书强力推荐

    如今已经是手机互联网时代,手机应用越来越普及.Android作为基本的手机操作系统.吸引了众多开发人员開始为Android系统开发应用. 假设你正在开发或者准备进行Android的开发,我们今天推荐的 ...