<script type="text/html"></script> js模版使用

一、简单示例

<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>

脚本代码

<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': 'zhang', '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>

当你单击按钮时，可以把commentTemplate的内容追到comment_ul_2里，

而其中有一个replace，在替换时可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！

来自：
http://www.cnblogs.com/MrZouJian/p/5614581.html http://www.cnblogs.com/lori/archive/2012/08/31/2665802.html