JavaScript HTMLTemplateElement.content 怎样重复实例化模板片段

重复使用 HTMLTemplateElement.content 时，应每次复制它包含的节点，再填数据并插入页面。可以使用 document.importNode(template.content, true)；不要直接把 template.content 插进容器，否则会移动模板中的子节点，之后原件就可能为空。

文档入口：https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content。下面用待办列表说明从模板定义、实例创建到事件管理的完整用法，示例未在本文环境运行。

保留模板原件，每次复制一个新片段

content 是模板内容的 DocumentFragment，不是模板内部 HTML 的字符串副本。读取属性本身不会自动复制。模板节点与片段内节点也不是普通父子关系，查找模板内部元素应从 template.content 开始。

template 元素上的 id 用于定位唯一原件；模板内部则使用 class。复制时传入 true，表示连同后代节点一起复制，而不是只创建一个没有内容的片段外壳。

填充实例后再插入容器

// 脚本放在上方HTML之后执行
const template = document.getElementById("task-template");
const list = document.getElementById("task-list");
if (!(template instanceof HTMLTemplateElement) || !list) {
  throw new Error("模板或列表容器不存在");
}
function makeTask(label) {
  // 每次调用都复制完整子树，保留content原件
  const fragment = document.importNode(template.content, true);
  const item = fragment.querySelector(".task");
  const title = fragment.querySelector(".task-title");
  const remove = fragment.querySelector(".task-remove");
  if (!item || !title || !remove) {
    throw new Error("模板缺少必要元素");
  }
  title.textContent = label; // 将数据作为文本写入
  remove.addEventListener("click", () => item.remove());
  return { fragment, item };
}
const created = ["整理需求", "确认排期"].map(makeTask);
for (const entry of created) {
  list.append(entry.fragment); // 移动副本中的节点，不移动模板原件
}

每次 makeTask 都创建新副本，任务标题和移除按钮各属于自己的 li。实例节点插入列表后，fragment 本身不会成为页面中的包裹元素；它的子节点转移到 list，片段随之变空。

因此，需要后续更新任务时保存 item，而不是认为 entry.fragment 仍能查询到已插入的节点。返回对象中的 item 引用在移动后仍指向同一个元素。修改 item 的文字不会自动修改模板原件，也不会同步到其他副本。

把事件绑定到实际元素

深复制不会复制通过 addEventListener 注册的监听器，也不会复制 JavaScript 属性方式设置的事件处理函数。例子在创建每个副本时给按钮绑定监听器，正是为了让行为跟随真实按钮，而不是依赖模板原件上曾有的注册。

也不要把监听器只绑定在 DocumentFragment 上，期待插入后的按钮事件继续冒泡到它：片段不是插入后节点的父元素。大量同类条目也可以在稳定的 list 容器上做事件委托，但应与逐实例绑定二选一，避免同一动作处理两次。

// 替代方案：采用委托时，删除makeTask中按钮的addEventListener
list.addEventListener("click", (event) => {
  if (!(event.target instanceof Element)) return;
  const button = event.target.closest(".task-remove");
  if (!button || !list.contains(button)) return;
  const item = button.closest(".task");
  // 只处理当前列表直接拥有的条目，避免嵌套列表误删
  if (item?.parentElement === list) item.remove();
});

上段是替代绑定方式，不应与前一段逐实例按钮监听一同启用。列表整体销毁时，按照应用的生命周期解除外部注册并释放业务缓存中保留的元素引用；复制模板本身不会替应用管理这些资源。

处理重复标识与文档上下文

cloneNode(true) 同样能够深复制节点，但模板 content 通常属于独立的内容文档。document.importNode 在调用文档的上下文中创建副本，涉及自定义元素时，这个差异会影响构造所使用的注册定义，因此这里选择它作为默认写法。

如果模板内部确实需要 id，例如 label 的 for 或 aria-labelledby，应为每个实例生成唯一值，并成对更新所有引用属性。仅修改 id 而漏掉引用，可能使标签关联到其他条目。普通实例内查询优先使用 class 或 data 属性，可以减少不必要的全局标识管理。

textContent 适合把标题当普通文本写入。模板结构固定时，不必为了插入一条标题改成拼接 HTML；若业务确实允许富文本，应单独设计可信内容来源和处理规则，不应把模板复用当作任意 HTML 输入的安全保证。

按用途选择实例引用方式

这套写法的价值在于结构和数据分开、实例之间彼此独立。DocumentFragment 并不保证所有场景都比循环直接插入更快，本文也没有性能测量；优先让所有权和调用方式容易理解。

为什么第一次插入正常，第二次没有内容？

先看是否直接插入了 template.content，或者反复插入同一个副本。片段的子节点会被移动，每条实例都需要新的复制。

为什么在片段上querySelector查不到刚插入的按钮？

按钮已经随子树进入列表，片段为空。保存按钮或条目引用，或从正确的列表实例查找。

把deep省略可以吗？

不要省略。要复制模板完整内容，应明确传 true；浅复制不能得到示例所需的后代结构。

参考：模板content、importNode、cloneNode、DocumentFragment。