标签本身不会自动渲染，必须手动克隆后插入DOM；其内容为DocumentFragment，需用content.cloneNode(true)获取并安全处理（防XSS、ID冲突等），不可直接innerHTML操作。
template 标签本身不会自动渲染，必须手动克隆后插入 DOM
是 HTML5 的原生模板机制，但它不会被浏览器解析或执行——里面的 不运行、DocumentFragment，需显式取出、克隆、挂载。
- 直接写
- 必须用 JS 获取：
document.getElementById('card').content，再调用.cloneNode(true)才能复用 - 不 clone 直接 append 会移动原节点（只生效一次），后续调用就为空
复用 template 的标准三步操作（含安全处理）
典型流程：取 content → 克隆 → 替换占位符（如有）→ 插入目标容器。注意避免 XSS 和重复 ID 冲突。
- 用
template.content.cloneNode(true)而非template.innerHTML，否则丢失 script 执行上下文和表单状态 - 若模板含动态文本，用
textContent设置（防 XSS），不用innerHTML拼接用户数据 - 若模板含
id属性，克隆后需重置（如el.id = 'card-' + Date.now()），否则 DOM ID 重复导致getElementById行为不可靠
const tmpl = document.getElementById('user-card');
const instance = tmpl.content.cloneNode(true);
instance.querySelector('.name').textContent = userData.name;
instance.querySelector('.email').textContent = userData.email;
document.body.appendChild(instance);
template + innerHTML 混用时的常见错误
有人试图把 当成字符串模板，用 innerHTML 提取再 replace()，这会破坏结构完整性，尤其含自闭合标签或嵌套时。
-
template.innerHTML返回的是字符串，但template.content是真实的 DOM 片段，可遍历、事件绑定、样式计算 - 用
innerHTML拼接后insertAdjacentHTML，会丢弃原有内的或，且无法响应式更新 - 若模板含
，直接 innerHTML 复制会导致 value 属性值丢失（实际值不在属性中）
与现代框架模板机制的本质区别
原生 不提供响应式、作用域插值、条件渲染等能力——它只是静态片段容器。Vue 的 、React 的 JSX、Svelte 的 {#if} 都是编译期抽象，运行时已转为 JS 操作，和 HTML5 的 无直接关系。
立即学习“前端免费学习笔记（深入）”；
- 想实现「数据变化自动更新」，必须自己监听、重新 clone、重新填充、重新替换节点
- 没有内置 key 机制，列表渲染需手动管理 DOM 实例生命周期（避免内存泄漏）
- 服务端渲染（SSR）中，
不会被服务端解析，仅客户端可用
真正复用频繁、逻辑复杂时，别硬扛原生 template，该上轻量级模板库（如 lit-html）或组件框架就上。
