JS的type類型為 text/template

JS標簽中有時候會看見<script type="text/tmplate" >,大概就是一個放置模板的地方,而這些東西並不顯示在頁面

 

    在js里面，經常需要使用js往頁面中插入html內容。比如這樣：

var number = 123;
$('#d').append('<div class="t">'+number+'</div>')

    如果html很短還好說，但是遇到描述里面的這么大段，直接用字符串存儲會很困難，因為不光要處理單引號，還需要很多「+」號把字符串一個個連接起來，十分的不方便。
    <script>設置type="text/template"，標簽里面的內容不會被執行，也不會顯示在頁面上，但是可以在另一個script里面通過獲取插入到頁面中。這樣就把大段的HTML操作從js里面分離開了。

<input type="button" id="btn" value="顯示我" />
<script type='text/template' id="demo1">
    <div class="videojs-hero black-background-color">
        <span class="err_message">
            <p style="text-align:left">抱歉×_×播放出錯了</p>
            <p></p>
            <p style="text-align:left">1.請檢查您的網絡並刷新頁面重試 </p>
            <p style="text-align:left">2.請檢查您的PC機是否沒有安裝Flash，下次記得要安裝哦^_^</p>
        </span>
    </div>
</script>
<script>
    function createErrorOverlay(){
        var overlay=document.createElement('div');
        overlay.className='box';
        overlay.innerHTML=document.querySelector('#demo1').innerHTML;
        document.getElementsByTagName('body')[0].appendChild(overlay);
    }
    document.getElementById('btn').onclick= createErrorOverlay;
</script>