js模版使用

<div></div>

<script type="text/html" id="javascript_template">
　　<div onclick="_dom()">
    　　<ul id="wrap">
       　　 <li>1</li>
        　　<li>2</li>
    　　</ul>
　　</div>
</script>

1.首先這種寫，在頁面渲染的時候，瀏覽器不會讀取script標簽中的html代碼

2.外面不能獲取到里面的div節點

so： 

       在使用時，要在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')
}

原文鏈接：https://www.cnblogs.com/MrZouJian/p/5614581.html