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. 如何在CTF中当搅屎棍

    论如何在CTF比赛中搅屎 0×00 前言 不能搅屎的CTF不是好CTF,不能搅屎的题目不是好题目. 我很赞成phithon神的一句话,"比赛就是和他人竞争的过程,通过各种手段阻止对手拿分我觉 ...

  2. android开发—Fragment中onCreateView()和onActivityCreated()的区别

    在编写Fragment时,在onCreateView()方法中启动了一个初始化自定义View的方法 initView(),但是调试时就崩溃,打印日志发现是这里出了问题,就将这个方法放到了onActiv ...

  3. iOS本地存储-数据库(FMDB)

    初识FMDB iOS中原声的SQLite API在进行数据存储的时候,需要使用C语言中的函数,操作比较麻烦,于是就出现了一系列将SQLite封装的库.本文讲解的FMDB就是其中的一个. FMDB PK ...

  4. 改变input默认选中颜色

    修改 outline-color 属性即可实现

  5. win7 远程桌面关机

    在任务管理器中, 打开运行窗口, 执行 shutdown -s 命令, 将在30秒后关闭win7, 如果需要更快, 加上 -t 10 参数 关于 shutdown 的命令行说明: C:\Users\R ...

  6. 夯实基础之php学习-1基础篇

    1,单引号和双引号的区别 单引号表示字符串,双引号能解析字符串中的变量,所以,如果没有变量,尽量用单引号,加快解析速度 当字符串需要单引号或者双引号的时候,可以用转义字符代替 2,类型转换 通过(bo ...

  7. YII框架概念与安装

    Yii概念: YII安装:      下载最版本http://www.framework.com      解压至访问目录下 直接打开advanced/init.bat文件输入0之后输入yes 打不开 ...

  8. 做中学之Vim实践教程

    做中学之Vim实践教程 Vim VIM是一个非常好的文本编辑器,很多专业程序员使用VIM编辑代码,即使以后你不编写程序,只要跟文本打交道,都应该学学VIM,可以浏览参考一下普通人的编辑利器--Vim这 ...

  9. 我的第一个 JSP (SSH) 个人网站【开源】

    唠叨两句背景 相当长时间没上来发帖了,最近几个月除了完成产品经理一个又一个重复又重复的app开发任务之外,最大的工作莫过于充分利用上笔主的业余时间,系统性地跟李刚同志学习JavaEE的SSH框架开发技 ...

  10. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...