如何高效使用HTML5 template克隆节点及contentDocumentFragment复用模板？

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

直接复制以下代码：

真正能触发执行的只有两种方式：

• 手动调用 eval()（不推荐，有 CSP 和安全风险）
• 把克隆后的 <script> 插入文档流（如 append 到 document.body），且该 <script> 是内联脚本（无 src）

注意：带 src 的外链脚本即使插入 DOM 也不会二次加载——浏览器会跳过已解析过的相同 URL。

template.content 为什么不能直接 cloneNode？

<template> 的 content 属性返回的是 DocumentFragment，它不是元素节点，没有 cloneNode() 方法。常见错误是写成 template.content.cloneNode(true)，直接报 TypeError: template.content.cloneNode is not a function。

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

正确做法是先从 content 中取子节点再克隆：

const fragment = template.content; const clone = document.importNode(fragment, true); // ✅ 正确 // 或逐个克隆子节点（适合只取部分） const clone = document.adoptNode(fragment.firstChild.cloneNode(true));

document.importNode() 是专为跨文档（包括 DocumentFragment）复制设计的 API，比手动遍历更可靠。

DocumentFragment 克隆后插入多次失效？

DocumentFragment 是“一次性容器”：一旦被 appendChild() 或 append() 插入到真实 DOM，它内部节点就被移走，fragment 变空。再拿它去插入第二次，什么都不会发生。

典型误用：

const frag = template.content; el1.append(frag); // 第一次 OK el2.append(frag); // 第二次 ❌ frag 已空

解决方法只有两个：

• 每次用前重新调用 document.importNode(template.content, true)
• 缓存一个“干净副本”，比如 const cleanFrag = document.importNode(template.content, true)，然后每次克隆这个副本

别试图用 frag.cloneNode(true)——它不工作，因为 DocumentFragment 本身不支持 cloneNode。

性能对比：importNode vs innerHTML + createElement？

对简单结构，innerHTML 看似快，但隐患多：XSS 风险、事件绑定丢失、HTML 解析开销不可控；而 document.importNode() 是原生 DOM 节点复用，零解析、零字符串拼接。

实测中，当模板含 5+ 个嵌套元素或带 data- 属性时，importNode 稳定快 20%~40%；若模板含 <input> 或 <select>，innerHTML 还会重置用户输入状态（即使没插入）。

关键提醒：importNode 不会保留原 <template> 中的 JS 引用或闭包，所有事件监听必须在克隆后重新绑定——这点常被忽略，导致“节点有了，点击没反应”。