<template>: 模板标签
最后更新：2026-10-13
<template>模板标签
声明一段可复用的 HTML 模板，其内容不会被渲染、也不会执行其中的脚本，需由 JavaScript 克隆后插入页面。
| 分类 | 脚本与嵌入 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </template> 标签 |
| 状态 | 标准 |
📝 语法
<template id="row">
<tr><td></td></tr>
</template>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <template> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： template 的内容存在于 DOM 但不可见、不执行；通过 .content 访问文档片段再 cloneNode 使用。
❓ 常见问题
Qtemplate 里的内容会被渲染吗？
A不会。
<template> 的内容在页面加载时被解析但不渲染、不执行脚本、不加载图片，藏在「惰性文档片段」里。用 JS 克隆（content.cloneNode(true)）插入 DOM 后才开始渲染，是实现客户端模板的标准方式。Qtemplate 和 display:none 的 div 有什么区别？
A本质不同：display:none 的内容仍是活的 DOM——脚本会执行、图片会加载、查询选择器能选中；
<template> 内容完全惰性，零副作用、不可被常规选择器命中。存放待用模板必须用 template。Qtemplate 支持嵌套吗？
A支持，template 里可以再放 template，外层未激活时内层也保持惰性。嵌套模板适合构建多层列表结构（列表套列表），逐层克隆填充。
🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
