让script的type属性等于text/html
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的更多相关文章
- JavaScript的type属性等于text/html 例子
在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...
- script中type属性讲解
js的代码是由type决定的: <script type='javascript'> 默认的 <script type="text/html" > 就是 ...
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- jquery html属性和text属性的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- js修改input的type属性问题
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...
- input表单的type属性详解，不同type不同属性之间区别
目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
- script 有哪个属性可以让它不立即执行 defer,async
.async 和 defer 属性 http://blog.csdn.net/qq_34986769/article/details/52155871 1. defer 属性<script sr ...
- html5中script的async属性
html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...
随机推荐
- vijos1431[noip2007]守望者的逃离（背包动规）
描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者 在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这 个荒岛施咒,这座岛很快就会 ...
- css的小问题总结
1.居中问题 比如让宽度为60%的<div class="box">居中,可以再.box里面设置margin:auto 2.高度固定的div里面有两个子类div且高度和 ...
- Entityframework core 动态添加模型实体
重新DBContext中OnModelCreating protected override void OnModelCreating(ModelBuilder modelBuilder) { // ...
- （原创）mybaits学习三，springMVC和mybatis融合
上一节,总计了spring和mybaits的融合,这一节,我们来学习springmvc和mybatis融合 最近在弄一个SSM的项目,然后在网上找资料,将资料总结如下 一,开发环境的配置 MyEcli ...
- 3098: Hash Killer II
3098: Hash Killer II Time Limit: 5 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 1219 Solved: ...
- codevs 2801 LOL-盖伦的蹲草计划
时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫盖伦的英雄.他的伟大之处在于他特别喜欢蹲 ...
- PRML读书会第六章 Kernel Methods（核函数，线性回归的Dual Representations，高斯过程 ，Gaussian Processes）
主讲人 网络上的尼采 (新浪微博:@Nietzsche_复杂网络机器学习) 网络上的尼采(813394698) 9:16:05 今天的主要内容:Kernel的基本知识,高斯过程.边思考边打字,有点慢, ...
- GBK 编码时 url 中带中文参数的问题
项目中遇到的 GBK 编码问题,记录如下. 将代码精简为: <!DOCTYPE HTML> <html> <meta charset="gb2312" ...
- xml入门
1.why xml? 如果说JSON是一种轻量级的数据交换格式,那么xml就是重量级的.xml应用于web开发的许多方面,常用于简化数据的存储和共享.永远要记住,xml跟JSON一样是用来存储和传输数 ...
- ASP.NET 系列：单元测试
单元测试可以有效的可以在编码.设计.调试到重构等多方面显著提升我们的工作效率和质量.github上可供参考和学习的各种开源项目众多,NopCommerce.Orchard等以及微软的asp.net m ...