关于 <script type='text/template'

关于 <script type='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>

又发现一个水平垂直居中的方法

<!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>

View Code