HTML中template克隆节点 HTML中template标签importNode方法-html教程-PHP中文网

应使用 template.content.cloneNode(true) 克隆模板内容，因其安全、兼容性好且不干扰原模板；appendChild 直接操作会静默失败，template.children 恒为空，importNode 仅适用于跨文档场景。

html中template克隆节点 html中template标签importnode方法

template.content 不能直接 appendChild

直接对元素调用 appendChild() 会静默失败，因为它的 content 是一个 DocumentFragment，不是普通节点。浏览器不允许把 fragment 当作子节点插入（除非先克隆或导入）。

常见错误现象：document.querySelector('template').appendChild(node) 报错或无反应；或者误以为 template.children 能取到内容——其实它永远是空的。

template.content 是只读的 DocumentFragment，必须用它来克隆或导入
不要试图遍历 template.childNodes 后再手动 append，fragment 内部节点没有父引用，插入时会自动脱离
若 template 内含 <script></script> 或，它们在克隆后默认不执行/不生效，需手动处理

cloneNode(true) 是最常用、最安全的克隆方式

cloneNode(true) 作用于 template.content，能完整复制所有子节点、属性、文本，且兼容性好（IE9+），无需额外导入步骤。

使用场景：动态渲染列表项、表单模板、弹窗内容等需要多次复用的结构。

<template id="item-tpl"><li class="item"><span class="name"></span></li>
</template><script>
  const tpl = document.getElementById('item-tpl');
  const frag = tpl.content.cloneNode(true); // ✅ 正确
  const li = frag.querySelector('li');
  li.querySelector('.name').textContent = 'foo';
  document.getElementById('list').appendChild(frag);
</script>

cloneNode(true) 复制的是 content 的副本，原 template 不受影响
克隆后的节点已脱离文档，可自由修改 class、text、事件绑定，再插入目标容器
注意：克隆不会触发 connectedCallback（自定义元素），也不会重跑内联 script

importNode 是跨文档场景才需要的冷门方案

importNode() 主要用于 iframe 或不同 document 实例之间迁移节点，比如从 iframe 的 template 中取内容到主页面。在单页应用中几乎用不到，强行用反而多此一举。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

容易踩的坑：document.importNode(template.content, true) 看似可行，但 template 本身属于当前 document，import 属于冗余操作，且某些旧版 Safari 对 fragment import 支持不稳定。

仅当节点来自另一个 document（如 iframe.contentDocument）时，才必须用 importNode
importNode 第二个参数为 true 才深拷贝；false 只拷顶层 fragment，内部节点仍被引用
不要混用：importNode(template.content, true) + appendChild 和 cloneNode 效果一致，但多了兼容性和语义负担