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,也是个很好用的模版技术。






目录
相关文章
WK
|
2月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
57 1
|
6天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
29天前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
29天前
|
前端开发 搜索推荐 算法
|
29天前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
29天前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 属性
HTML属性为元素提供额外信息,格式为name=&quot;value&quot;,置于开始标签内。如&lt;a href=&quot;http://www.runoob.com&quot;&gt;,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
2月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
118 0
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
34 0