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）中使用。