您的位置：首页 > Web前端 > HTML

让script的type属性等于text/html

2016-04-06 11:45 525 查看

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，进行赋值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航