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. Linode Centos6.5从零开始装环境...流水账

    安装JDK 下载. 先通过oracle网站, 下载, 得到link后, 在linode命令行里wget, 速度飞快, 但是文件名要改下. 其中JDK6是.bin, 其他都是tar.gz, bin直接执 ...

  2. java集合比较

    几种集合的比较Hashset,hashmap无序的treeset,hashset有序的 linkedhashset 有序的,和插入数序一样的

  3. 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法

    一.未在本地计算机上注册“microsoft.ACE.oledb.4.0”提供程序 http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c ...

  4. Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  5. mSites and Smarty

    目前的页面实现方式是需要向后台请求接口,返回 JSON 数据,动态拼接字符串塞进 DOM 中(innerHTML).考虑用 Smarty 生成静态页面,可以在后台用 PHP 得到数据,字符串拼接,然后 ...

  6. 我们来八一八阿里云OS的实质和历史

    有个姓许的朋友在微信公众号上这样评论: 但是楼主对yunos的了解程度有多少,建议去了解下再评价别人,免费给你普及下:http://www.ithome.com/html/digi/109484.ht ...

  7. Python中list,tuple,dict,set的区别和用法

    Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, tuple, dict, set.这里对他们进行一个简明的总结. List ...

  8. Log4net使用(一)

    LogHelper.cs using NLog; using NLog.Targets; namespace MyProject.Tool.Log { public class LogHelper { ...

  9. 如何限制虚拟主机可使用的CPU资源

    使用IIS 6.0运营虚拟主机的朋友们都会碰到这样一个问题,当某个网站占用大量CPU资源时,会把整个服务器都拖慢了,影响服务器上其他网站的访问速度,客户们的投诉也让系统管理员倍感头疼.我们知道,从II ...

  10. Feuding Families and Former Friends: Unsupervised Learning for Dynamic Fictional Relationships-Naacl 2016-20160422

    1.Information publication:-Naacl 2016 2.What 根据小说中的人物描述,a)在每个时间段给出,人物关系的描述的概率分布,b)从时间轴上看出关系的变化轨迹,提出模 ...