js之text/template的使用

在js里面，经常需要使用js往页面中插入html内容。比如这样：

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

如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。

 

 1 <input type="button" id="btn" value="显示我" />
 2 <script type='text/template' id="demo1">
 3 <div class="videojs-hero black-background-color">
 4 <span class="err_message">
 5 <p style="text-align:left">抱歉×_×播放出错了</p>
 6 <p></p>
 7 <p style="text-align:left">1.请检查您的网络并刷新页面重试 </p>
 8 <p style="text-align:left">2.请检查您的PC机是否没有安装Flash，下次记得要安装哦^_^</p>
 9 </span>
10 </div>
11 </script>
12 <script>
13 function createErrorOverlay(){
14 var overlay=document.createElement('div');
15 overlay.className='box';
16 overlay.innerHTML=document.querySelector('#demo1').innerHTML;
17 document.getElementsByTagName('body')[0].appendChild(overlay);
18 }
19 document.getElementById('btn').onclick= createErrorOverlay;
20 </script>