HTML中template标签如何实现不可见模板代码的复用？

本文共计890个文字，预计阅读时间需要4分钟。

直接访问模板的innerHTML会得到空字符串，而template.children也是空NodeList，因为浏览器不会将模板内容解析为真实子节点。正确加载的结构只有可读的content属性，它返回一个DocumentFragment。

常见错误是写成：template.querySelector('.name')，这永远查不到；正确写法是：template.content.querySelector('.name')。

• 必须用 .content 才能访问内部 DOM 节点
• DocumentFragment 不是普通元素，不能直接 appendChild 到页面，必须先克隆
• 克隆后才能自由修改文本、属性、事件绑定等

克隆必须用 cloneNode(true) 或 importNode

直接把 template.content append 到页面，只会移动一次——第二次再 append 就什么都没有了，因为 DocumentFragment 是“单次使用”的。必须显式克隆才能复用。

两种等效写法：template.content.cloneNode(true) 或 document.importNode(template.content, true)。后者更语义明确，推荐在跨文档场景（如 iframe）中使用。

立即学习“前端免费学习笔记（深入）”；

• cloneNode(true) 深度克隆所有子节点，包括文本、元素、注释
• 不加 true（即浅克隆）只克隆 <template> 自身，没意义
• 克隆后的节点是全新实例，样式、事件、表单值都需重新设置

模板内脚本和内联事件完全不执行

<template> 中的 <script> 标签不会解析，onclick="doSomething()" 也不会绑定——这是设计使然，不是 bug。所以别指望靠内联 JS 实现交互逻辑。

典型翻车现场：模板里写了 <button onclick="alert(1)">点我</button>，克隆插入后点击毫无反应。

• 所有交互必须在克隆后手动添加：clone.querySelector('button').addEventListener(...)
• 或用事件委托，在父容器监听，用 event.target.matches('.delete-btn') 判断来源
• 模板内 <style> 会生效，但作用域是全局的；如需封装，得配合 Shadow DOM

表单控件克隆后 value 和 checked 状态不对

如果模板含 <input type="text"> 或 <input type="checkbox">，克隆出来的是初始 HTML 值（比如 value="默认"），不是用户当前输入的内容。这是因为克隆的是 DOM 结构，不是运行时状态。

例如：用户在某个已渲染的表单项里输入了 “张三”，你克隆同一模板生成新项，新项的 input 还是空的，不是 “张三”。

• 克隆后需显式设置：clone.querySelector('input').value = '新值'
• 对于 checkbox/radio，要同时设 checked 属性和 defaultChecked 属性才可靠
• 不要依赖 innerHTML 替代方案，它易 XSS 且无法安全操作表单状态

最常被忽略的一点：模板内容虽“不可见”，但它仍参与 HTML 解析校验——非法嵌套、缺失闭合标签、在不允许的位置使用都会报错或被浏览器静默修正。写的时候就得当它是真实 DOM 来对待。