clonenode(true)是最推荐的深拷贝方式，但需手动处理id冲突、事件丢失、script不执行、单选按钮联动四类问题。
直接用 cloneNode(true) 是安全、兼容、最推荐的深拷贝方式，但必须手动处理 ID 冲突、事件丢失、<script></script> 不执行、单选按钮联动这四类问题。
克隆后 ID 重复导致选择器失效或表单异常
HTML 规范要求 id 全局唯一，而 cloneNode(true) 会原样复制所有属性——包括 id。一旦插入多个克隆体，document.getElementById() 只返回第一个匹配项，label[for] 也会指向错误元素。
- 必须在克隆后重设
id：比如用计数器生成box-1、box-2 - 关联的
label[for]也要同步更新，否则点击 label 不会聚焦对应控件 - 如果元素含
name（如<input type="radio">），同样要改——否则多组单选按钮会意外互斥
克隆不带事件监听器，但会复制 onclick 属性
cloneNode(true) 复制的是 DOM 结构和内联属性，不复制通过 addEventListener() 绑定的事件。这意味着你克隆一个绑了 click 监听器的按钮，新按钮点不了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 内联事件如
onclick="doSomething()"会被保留，但不推荐依赖它 - 正确做法是克隆后立即调用
addEventListener()重新绑定，或把逻辑抽到委托事件里（如监听父容器） - 避免在克隆前用
node.onclick = fn，它本质也是属性，会被复制，但可维护性差
template.content.cloneNode(true) 是模板复用的标准写法
用 <template></template> 存放结构片段，再调用 tpl.content.cloneNode(true)，是最干净的动态渲染模式——它天然隔离脚本执行、不污染主文档、支持任意次数复用。
- 只对
template.content调用cloneNode(true)，不是对template本身 - 克隆结果是
DocumentFragment，可批量修改后再插入，性能比逐个 append 更好 - 内部的
<script></script>默认不执行；如需运行，得把克隆后的<script></script>插入 document.body（仅限内联脚本）
deep 参数为 false 时几乎没实用价值
传 false 只克隆节点自身，不复制子节点和文本内容。对 <div>hello</div> 调用 .cloneNode(false)，结果是空 <div></div>，连 “hello” 都没了。
- 除非你明确只要一个空壳节点（比如占位符），否则一律用
true - 旧浏览器（IE8 及更早）不支持省略参数，所以不要写成
.cloneNode()，必须显式传true或false -
cloneNode(true)在 IE9+、所有现代浏览器中行为一致，无需 polyfill
真正容易被忽略的，是单选按钮的 name 和 label[for] 必须同步更新——改了 id 却忘了改 for，或者改了 name 却漏掉某一个 radio，都会让表单行为变得不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
