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');