标准答案
- template 元素用于保存可复用的 HTML 片段，页面加载时不会直接渲染出来。
- template 的内容在 content 这个 DocumentFragment 中，需要脚本 clone 后再插入页面。
- display: none 的元素已经是 DOM 的一部分，只是视觉上不显示；template 内容默认还没有进入可见页面结构。
- template 适合原生组件、列表项模板、Web Components 和少量声明式渲染场景。
- 如果项目已经使用 Vue、React 等框架，通常由框架模板或组件系统承担这类工作。
题目解析
区别重点在“是否已经成为实际页面节点”。隐藏 DOM 仍会占据 DOM 结构和可被选择，template 更像惰性的 HTML 蓝图。
template 里的脚本、图片等资源不会像普通 DOM 那样立即参与渲染和加载。
代码示例
先克隆 template.content，再把克隆结果插入页面。
HTML
<template id="user-card">
<article class="card">
<h2></h2>
</article>
</template>
<script>
const template = document.querySelector('#user-card')
const node = template.content.cloneNode(true)
node.querySelector('h2').textContent = 'Ada'
document.body.append(node)
</script>常见误区
- 把 template 当成普通隐藏容器，期待它直接显示。
- 直接修改 template 内部节点后，忘记 clone 和插入页面。
- 在现代框架项目里重复造一套模板系统，增加维护成本。