JvaScript的type属性等于text/html 例子

简介:

在使用javascript标签<script>的时候,其中type最常用的就是text/javascript

其实这个type还有其他用法,下面直接给出例子:



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

<script id="commentTemplate" type="text/html"> 
	<li>
		<div class="photo">
			<a href="#"> <img src="[UserImg]" /></a>
		</div>
		<p>
			<a href="#">[UserName]:</a><span class="time">[CreateDate]</span>
		</p>
		<div class="clear"></div>
	</li>
</script>

再看上面的代码片段,我们在下面的代码中怎么使用,如下:

<html>
<head>
<title>标题</title>
</head>
<body>
	<div id="comment_ul_2"></div>
	<input type="button" id="addFun" value="click me" />
	<script type="text/javascript">
		var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
		$("#addFun").click(function() {
			var html = document.getElementById("commentTemplate").innerHTML;
			var source = html.replace(reg, function(node, key) {
				return {
					'UserImg' : '1',
					'UserName' : '张',
					'CreateDate' : '2011-1-1'
				}[key];
			});
			$("#comment_ul_2").append(source);
		});
		var zzl = "name:[name]";
		zzl = zzl.replace(reg, function(node, key) {
			return {
				'name' : '小明'
			}[key];
		});
		alert(zzl);
	</script>
</body>
</html>

这里解释一下:其中有一个replace,在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!



另外,网上有一些比较好的关于 text/template 模版用法的插件js,也是个很好用的模版技术。






目录
相关文章
|
28天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
30 5
|
18天前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
44 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
27天前
|
JavaScript 前端开发 UED
获取HTML元素的offsetParent属性
获取HTML元素的offsetParent属性
|
24天前
|
JavaScript 前端开发 Java
获取HTML元素的scrollHeight属性
获取HTML元素的scrollHeight属性
|
25天前
|
JavaScript 前端开发 UED
获取HTML元素的offsetParent属性
获取HTML元素的offsetParent属性
|
26天前
HTML 链接- id 属性
【7月更文挑战第1天】HTML 链接- id 属性。
21 1
|
28天前
|
前端开发 JavaScript
HTML 全局属性介绍及示例
HTML 全局属性介绍及示例
16 2
|
28天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
29 1
|
1月前
|
Web App开发 移动开发 搜索推荐
HTML5 新增语义标签及属性
HTML5 新增语义标签及属性
|
1月前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
75 0