在script标签中包含一个html片段。
<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>
在编写的时候,需要要在script标签上加个ID(如图中“javascript_template
”),并在外层新建一个div容器。可以通过如下代码来实现:
var _html=document.getElementById('javascript_template').innerHTML;
document.getElementsByTagName('div')[0].innerHTML=_html;
如果遇到html代码加入外部div后,获取不到节点的情况,可以在外部写个函数,然后在html内部用行内调用 onclick="_dom()"
function _dom() { document.getElementById('wrap') ;}
【原文地址:】https://www.cnblogs.com/xcsn/p/6375129.html
【参考网址:】http://www.cnblogs.com/MrZouJian/p/5614581.html https://www.cnblogs.com/lori/archive/2012/08/31/2665802.html
ps
模板替换变量
function tpl(template,data){
return template.replace(/\{%([^%\{\}]+)%}/g,function(orgin,item){
item = item.replace(/^\s+|\s+$/,"");
var params = [];
if(item.indexOf('.') > -1){
params = item.split('.')
}
return params.reduce((a,b)=> {
return a[b]
},data)
})
}
var str = `<div class="{%data.className%}">{%data.name%}</div>`
var d = {data: {name: 123,className:'hd'}}
var t = tpl(str,d)
console.log(t)
全部评论