template标签

最新推荐文章于 2025-06-27 09:03:14 发布

TheBadWaka

最新推荐文章于 2025-06-27 09:03:14 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html html5 标签 template

本文链接：https://blog.youkuaiyun.com/u011326979/article/details/53509442

HTML 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了HTML5新增的template标签，该标签用于定义文档内部的模板，有助于批量渲染DOM节点。文章通过实例演示了如何使用JavaScript操作template标签，并强调了template内容的正确访问方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章：
HTML5 标签元素简介
 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');