我们可以在<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. cocos2dx三种定时器使用

         cocos2dx三种定时器的使用以及停止schedule.scheduleUpdate.scheduleOnce 今天白白跟大家分享一下cocos2dx中定时器的用法. 首先,什么是定时 ...

  2. Haskell 几乎无疼痛入门指南

    当他重装Linux 机会虚拟机,安装 haskell 录制的过程中有什么.的方式来帮助那些谁在徘徊haskell进入外读者. 基本概念: Haskell : 是一门通用函数式语言.差点儿能够进行不论什 ...

  3. Fuel 5.1安装openstack I版本号环境

    声明:本博客欢迎转载,但请保留原作者信息! 作者:傅斌杰 团队:华为杭州OpenStack团队 Fuel 简单介绍 Fuel是Mirantis公司开发的部署openstack集群工具,主要功能为裸机P ...

  4. HTML5 CSS3 精美案例 : 达到VCD盒个性幻灯片

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns教师,行~ 行.这一次分享发夹CSS3 ...

  5. Twitter 新一代流处理工具——Heron 该纸币Storm Limitations

    Twitter 新一代流处理工具--Heron 该纸币Storm Limitations (空格分隔): Streaming-Processing Storm Problems scalability ...

  6. 复制(1)——SQLServer 复制简介

    原文:复制(1)--SQLServer 复制简介 前言: SQLServer的复制技术最少从SQLServer2000时代已经出现,当初是为了分布式计算,不是为了高可用.但是到了今天,复制也成为了一种 ...

  7. Chapter06-Phylogenetic Trees Inherited(POJ 2414)(减少国家DP)

    Phylogenetic Trees Inherited Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 480 Accepted ...

  8. SQL 2008 SP2 找不到SQL Server Engine

    原文:SQL 2008 SP2 找不到SQL Server Engine 最近我有个客户碰到一个很奇怪的问题.他安装SQL server 2008 SP2的时候, SP2的安装程序无法找到SQL se ...

  9. 【七】注入框架RoboGuice使用:(Your First Custom Binding)

    上一篇我们简单的介绍了一下RoboGuice的使用([六]注入框架RoboGuice使用:(Singletons And ContextSingletons)),今天我们来看下自己定义绑定(bindi ...

  10. 我的java学习笔记(一)

    第一个java程序,还是熟悉的hello world public class FirstSample { //类 public static void main(String[] args) //方 ...