DOM克隆必须用cloneNode(true)才能复制整棵子树，否则仅复制节点自身；克隆后为孤儿节点需手动挂载，且事件监听器、表单实时值、ID冲突等需额外处理。
DOM 结构克隆不是对象深拷贝，而是节点树的结构复制，必须用 cloneNode()，且只有传 true 才算真正复制整棵子树。
克隆必须显式传 true 才递归复制子树
默认参数是 false，省略会只复制节点自身（如一个 <div> 标签和它的属性），不带任何子元素、文本或注释。要复制完整结构，必须写 node.cloneNode(true)。这一步不能靠“默认行为”或“自动推断”，否则结果是空壳节点。
-
cloneNode(false)：适合只取标签骨架，比如复用样式类但清空内容 -
cloneNode(true)：复制所有后代节点、文本节点、注释节点——但仅限 HTML 结构层面 - 它不关心 JS 运行时状态，只忠实地重建 DOM 树的静态快照
克隆后不是“即插即用”，而是孤儿节点
返回的节点完全脱离文档，parentNode 为 null，也不会渲染。必须手动挂载到目标父容器中，例如：
parent.appendChild(clonedNode)parent.insertBefore(clonedNode, refNode)- 若原节点在 DocumentFragment 中，克隆后仍需确保目标
parent存在且可操作
三类关键内容不会被自动复制，需手动补全
即使用了 true，以下内容仍丢失，必须额外处理：
立即学习“Java免费学习笔记（深入）”；
-
事件监听器：通过
addEventListener绑定的函数全部消失，需重新绑定或封装逻辑统一调用 -
表单实时值：如
<input value="初始">克隆后显示“初始”，但用户已输入的内容（input.value）不会保留；需同步：clonedInput.value = originalInput.value -
ID 冲突：克隆节点保留原始
id属性，插入前应重命名（如加-clone后缀），否则getElementById可能返回错误节点
特殊节点类型的行为差异需留意
不同节点克隆后表现不一致，容易踩坑：
- script 标签：结构被复制，但脚本不会自动执行（现代浏览器普遍禁用克隆 script 的执行）
-
iframe：只复制 HTML 标签，内部
document、历史记录、JS 执行环境全部丢失 - 文本节点：内容被复制为新对象，修改原文本不影响克隆体
-
dataset 属性：属于 HTML 属性，会被复制；但直接挂在节点上的 JS 属性（如
el.customData = {...}）不会
