摘要：
一、简单示例<script type="text/html" id="javascript_template"&g... 一、简单示例
<script type="text/html" id="javascript_template"> <div onclick="_dom()"> <ul id="wrap"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </script>
1.在页面渲染的时候，浏览器不会读取script标签中的html代码，又不在页面上显示
2.外面不能获取到里面的div节点
在使用时，要在script标签上加个ID可以供我们找到它，即然做模版用，且里面的html代码不会被渲染读取，则需在外面再新建一个div来当容器，装下这些html代码，
即我们可以通过
var _html=document.getElementById('javascript_template').innerHTML;
document.getElementsByTagName('div')[0].innerHTML=_html;
然后我们模版里的htmll代码就可以运行在页面中了;
如果遇到html代码加入外部div后，获取不到节点的情况，可以在外部写个函数，然后在html内部用行内调用 onclick="_dom()"
function _dom() { document.getElementById('wrap') ;}
二、json应用
模板代码
<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>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div id="comment_ul_2"></div>
<input type="button" id="addFun" value="click me" />
<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>
<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' : 'https://qqshop.aiwentec.com/attachment/images/1/2023/06/oDhD54sGZ4GLsU2PZfSlEFufrg24cT.jpg',
'UserName' : '张',
'CreateDate' : '2011-1-1'
}[key];
});
$("#comment_ul_2").append(source);
});
</script>
</body>
</html>
当你单击按钮时，可以把commentTemplate的内容追到comment_ul_2里，
而其中有一个replace，在替换时可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！
