template标签

参考文章：
HTML5 <template>标签元素简介
HTML语义化：HTML5新标签——template

template标签，顾名思义，模板的意思
HTML5提供的新标签，更加规范和语义化
可以把列表项放入template标签中，然后进行批量渲染

注：template标签display属性默认为none

                <template id="tpl">
                    <div class="linear-layout">
                        <span>静音</span>
                        <i class="iconfont icon-duigou linear-icon"></i>
                    </div>
                    <div class="linear-interval"></div>
                </template>

需要注意的是template标签的操作
直接使用原生JS操作，

var template = document.getElementById('tpl');
console.log(template);

获得到的DOM结构是这样的，可以看到中间有一层#document-fragment

所以要操作template里面的dom，不能直接用template，要用template.content，如下

var template = document.getElementById('tpl');
var layout = template.content.querySelector('div');
var text = template.content.querySelector('span');