在js里面，经常需要使用js往页面中插入html内容。比如这样：
如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了。
var number = 123;
$('#d').append('<div class="t">'+number+'</div>')
给<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>
又发现一个水平垂直居中的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ border: 1px solid red; background:yellow; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100px; height:200px; margin: auto; } </style> </head> <body> <div style="50%; height:400px; border:1px solid #000; position:relative"> <div class="box">我是box</div> </div> </body> </html>