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