cloneNode(true)仅深拷贝DOM结构而非运行时状态，需手动同步表单值、重置ID与name、更新label[for]、重新绑定事件，并优先使用template.content.cloneNode(true)安全复用。
直接用 cloneNode(true) 就能完成 DOM 结构深拷贝，但“拷贝出来能用”才是难点——ID 冲突、表单状态丢失、事件没绑、单选按钮联动失效，这四类问题不处理，克隆体一插入文档就出 bug。
为什么 cloneNode(true) 后的 input 值还是初始值？
因为 cloneNode(true) 只复制 HTML 属性（如 value="默认值"），不复制运行时状态。用户在 <input> 里输的“张三”，实际存在 JS 属性 input.value 上，而这个属性不会被克隆。
- 手动同步：克隆后立即执行
clonedInput.value = originalInput.value - 对
<textarea>同理，设clonedTextarea.value = originalTextarea.value - 对
<input type="checkbox">或<input type="radio">，需设cloned.checked = original.checked - 对
<select>，设cloned.selectedIndex = original.selectedIndex
克隆后 ID 重复导致 label 点击失效怎么办？
ID 重复会让 document.getElementById() 返回错误节点，label[for] 关联也会断掉——点 label 不聚焦对应 input，这是最隐蔽的表单 bug。
- 必须重置 ID：
cloned.id = "input-" + Date.now() + "-1"（或用计数器） - 同步更新关联的
label[for]：clonedLabel.setAttribute("for", cloned.id) - 如果用了
name（尤其是type="radio"），也要改：cloned.name = cloned.name + "_clone"，否则多组单选按钮会意外互斥
事件监听器为什么没跟着一起克隆？
cloneNode(true) 不复制通过 addEventListener() 绑定的监听器，也不复制 node.onclick = fn 这种 JS 赋值——它只保留内联事件（如 onclick="doSomething()"），但这种写法不该出现在现代代码里。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：克隆后立刻重新绑定，
cloned.addEventListener("click", handler) - 更优解：用事件委托，监听父容器，避免每次克隆都重复绑定
- 若原节点依赖某个 UI 库（如 Bootstrap 的 tooltip），克隆后需手动调用初始化方法，因为
cloneNode不触发connectedCallback或任何生命周期钩子
template.content.cloneNode(true) 是唯一安全的模板复用方式
直接克隆普通 DOM 节点容易污染主文档、触发脚本执行、引发样式泄漏；而 <template> 天然隔离，是唯一推荐的结构复用路径。
- 只对
template.content调用cloneNode(true)，不是对template元素本身 - 返回的是
DocumentFragment，可批量修改（改 ID、绑事件、填值）后再一次性appendChild，性能更好 - 内部
<script>默认不执行，如需运行，得显式把克隆后的 script 插入document.body（仅限内联脚本） - 旧浏览器（IE8 及更早）不支持省略参数，所以必须写
.cloneNode(true)，不能只写.cloneNode()
真正容易被忽略的，是克隆后不做任何处理就直接 appendChild——哪怕结构看起来一样，ID、name、label[for]、表单值、事件，五个地方错一个，编辑器里的交互就会当场失效。
