让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 ...
随机推荐
- iOS本地化
本地化与相机中显示英文 工程PROJECT -> info ->Localizations 添加相应的国际化语言 一.当你发现相机中显示英文,可以通过它设置 添加一项“Localize ...
- IIS 应用程序池.NET40 重新注册
32位的Windows:---------------------------------------------------------------------------1. 运行->cmd ...
- 关于在线预览word,excel,ppt,pdf的需求处理方法。
参考文档:http://www.cnblogs.com/wolf-sun/p/3574278.html 我选用的方案:先用office com组件生成pdf,然后使用pdf.js在线预览pdf文档.在 ...
- 【点滴积累,厚积薄发】修改hosts,并刷新dns缓存
Windows系统下hosts位置 C:\Windows\System32\drivers\etc 修改hosts后,要想马上生效,需要运行命令来刷新DNS缓存:ipconfig /flushdns
- 如何把Json格式字符写进text文件中
本篇一步一步学习怎样把显示于网页的json格式的字符串写进text文件中,并保存起来.学习到创建model, Entity, 序列化List<object>转换为json,显示于网页上.然 ...
- zabbix-proxy3.0.4编译安装
数据库配置: innodb_file_per_table=1 安装mysql rpm -ivh http://dev.mysql.com/get/mysql-community-release-e ...
- JAVA_HOME环境变量失效的解决办法
晚上把oracle自带的weblogic给卸载了,然后打开eclipse,发现报错了:Error: could not open `C:\Java\jre7\lib\amd64\jvm.cfg' JA ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- 常用hadoop web
http://localhost:50070 Hadoop服务 http://localhost:8088/ 集群中的所有应用程序 http://localhost:16010 hbase
- hystrix-turbine 监控的使用
1. 概述 Demo地址:http://git.oschina.net/zhou666/spring-cloud-7simple/tree/master/cloud-hystrix-turbine ...