clonenode(true) 是唯一可靠克隆方式，因 innerhtml 会丢失状态、事件、表单值且有 xss 风险；必须传 true 实现深克隆；template 克隆须用 content.clonenode(true)；克隆后需处理重复 id、name 及手动绑定事件。
cloneNode() 是唯一可靠的方式，其他方法（比如 innerHTML、outerHTML）都会丢失状态、事件、表单值或引入 XSS 风险。
为什么不能直接用 innerHTML 复制元素
用 element.innerHTML 取出再插入，本质是字符串拼接：它不保留用户已输入的 input.value、textarea 内容、checkbox.checked 状态，也不带已绑定的事件监听器。更危险的是，若内容含用户输入，直接赋给 innerHTML 可能执行脚本——这不是“克隆”，是注入漏洞。
cloneNode(true) 必须带 true 参数
cloneNode() 默认参数是 false，即浅克隆。对普通元素调用 .cloneNode() 或 .cloneNode(false)，只会复制空壳（比如一个没子节点的 div），内部结构全丢。真正要复用结构，必须显式传 true：
-
const clone = original.cloneNode(true)—— 深度复制所有子节点、文本、属性 - 对
<template></template>，必须走template.content.cloneNode(true)，因为template.content是DocumentFragment，不能直接插入 - 不要写成
template.cloneNode(true)，那克隆的是整个<template></template>标签，不是里面的内容
克隆后必须处理重复 ID 和状态
HTML 要求 id 全局唯一。克隆出来的节点默认继承原 id，直接插入会导致文档无效，还可能让 document.getElementById() 返回错误节点。常见做法：
- 清空或重命名
id：例如clone.id = ''或clone.id = 'box-' + Date.now() - 如果模板里有
<input name="email">，克隆后多个同名字段提交时会覆盖，建议同步改name或加索引 - 克隆不会复制事件监听器（这是安全默认），如需保留，得手动重新绑定，或 jQuery 中用
.clone(true)
template 元素克隆要绕开三个坑
用 <template></template> 是最干净的模板方案，但容易踩错路径：
-
document.querySelector('template').innerHTML永远为空字符串——内容不在 HTML 字符串里，在.content属性中 -
template.children总是空数组——它不维护子节点引用，只暴露.content - 直接
document.body.appendChild(template)会把模板从 DOM 移走，下次就没法用了；正确姿势是document.body.appendChild(template.content.cloneNode(true))
textContent、dataset、className 安全；但若模板里有 <script></script> 或 <style></style>，它们克隆后不会自动执行或生效，得单独提取并注入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
