type属性为text/html的时候，<script>片断中定义一个被JS调用的代码，代码不会在页面上显示

<script id="commentTemplate" type="text/html">

    <li>

        <div class="photo">

            <a href="#"> <img src="[UserImg]" style="height:50px;" /></a>

        </div>

        <p>

            <a href="#">[UserName]:</a><span class="time">[CreateDate]</span>

        </p>

        <div class="clear"></div>

    </li>

</script>

上面的代码片段的使用

<html>

<head>

<title>标题</title>

<meta charset="UTF-8">

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

    <div id="comment_ul_2"></div>

    <input type="button" id="addFun" value="click me" />

    <script type="text/javascript">

        //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。

        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');

        $("#addFun").click(function() {

            var html = document.getElementById("commentTemplate").innerHTML;

            var source = html.replace(reg, function(node, key) {

                return {

                    'UserImg' : 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1459913929&di=1934ccc3709e8e2301e73b578270212a&src=http://p7.qhimg.com/t01e6b39b78a7a65ac0.jpg',

                    'UserName' : 'ABC',

                    'CreateDate' : '2011-1-1'

                }[key];

            });

            $("#comment_ul_2").append(source);

        });

    </script>

</body>

</html>

当单击按钮时，可以把commentTemplate的内容追到comment_ul_2里

在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值

让script的type属性等于text/html的更多相关文章

  1. JavaScript的type属性等于text/html 例子

    在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...

  2. script中type属性讲解

    js的代码是由type决定的: <script type='javascript'> 默认的 <script type="text/html" >   就是 ...

  3. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  4. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  6. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  7. input表单的type属性详解，不同type不同属性之间区别

    目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...

  8. script 有哪个属性可以让它不立即执行 defer,async

    .async 和 defer 属性 http://blog.csdn.net/qq_34986769/article/details/52155871 1. defer 属性<script sr ...

  9. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

随机推荐

  1. noip模拟赛（10.4） 字典序（dictionary）

    [题目描述] 你需要构造一个1~n的排列,使得它满足m个条件,每个条件形如(ai,bi),表示ai必须在bi前面.在此基础上,你需要使它的字典序最小. [输入数据] 第一行两个正整数n,m.接下来m行 ...

  2. 字符串截取函数substr()

    substr(参数1,参数2[,参数3]); 该系统函数返回被截后的子字符串,它接受2个必选参数,参数1为要截取的字符串,参数2为截取的开始位置,参数3可选,表示截取长度. 例子:substr(&qu ...

  3. toodifficult 题解

    名字听起来十分厉害啊...一道lzz的提交答案题. 提答题,我们看看题目,给出一个解密程序,叫你加密. 每个点有一个加密的sample和一些要加密的文本. 从题目中我们可以得到一些信息: 加密后一般为 ...

  4. 【福吧资源网整理】老男孩-python运维6期 不加密

    老男孩-python运维6期 不加密,连夜整理出来分享给大家老男孩的python教程确实不错. 教程目录: 下载地址:http://www.fu83.cn/thread-204-1-1.html  

  5. 从大公司做.NET 开发跳槽后来到小公司的做.NET移动端微信开发的个人感慨

    从14年11月的实习到正式的工作的工作我在上一家公司工作一年多了.然而到16年5月20跳槽后自己已经好久都没有在写博客了,在加上回学校毕业答辩3天以及拿档案中途耽搁了几天的时间,跳槽后虽然每天都在不停 ...

  6. Android 开发1000问笔记

    11.android使用全局变量 定义Data类继承Application 在manifest.xml中声明 http://blog.csdn.net/feiyangxiaomi/article/de ...

  7. UWP 拉勾客户端

    前些天, 用 Xamarin.Forms (XF) 将就着写了个拉勾的 UWP 和 Android 的客户端. XF 对 Android  和 IOS 的支持做的很到位, 但是对 UWP 的支持目前仅 ...

  8. Linux进程间通信之信号量

    春节过去了,真的过去一年了.在公司待了快一年了.2016希望自己变得越来越好. ps:上面那句话是年前写的,中间隔了那么久,自己也变懒了. 一.信号量 1,信号量本质是一个计数器,控制访问共享资源的最 ...

  9. Android Stduio统计项目的代码行数

    android studio统计项目的代码行数的步骤如下: 1)按住Ctrl+Shift+A,在弹出的框输入‘find’,然后选择Find in Path.(或者使用快捷键Ctrl+Shift+F) ...

  10. JVM内存管理------GC算法精解（五分钟教你终极算法---分代搜集算法）

    引言 何为终极算法? 其实就是现在的JVM采用的算法,并非真正的终极.说不定若干年以后,还会有新的终极算法,而且几乎是一定会有,因为LZ相信高人们的能力. 那么分代搜集算法是怎么处理GC的呢? 对象分 ...