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>