JavaScript中复制DOM节点主要用cloneNode()方法，参数为false时浅拷贝（仅当前节点），true时深拷贝（含所有后代）；复制后需手动插入文档，且不复制事件监听器、动态属性和表单值，还需避免ID重复。
JavaScript 中复制 DOM 节点主要用 cloneNode() 方法，它能创建原节点的副本，但行为取决于是否深拷贝。
基础用法：cloneNode(boolean)
该方法接收一个布尔值参数：
- false（默认）：只复制当前节点，不复制子节点（浅拷贝）
- true：复制当前节点及其所有后代节点（深拷贝）
例如：
const original = document.getElementById('myDiv');
const shallowCopy = original.cloneNode(false); // 仅复制 <div id="myDiv"></div>
const deepCopy = original.cloneNode(true); // 复制整个结构，含内部文本、子元素等
复制后需要手动插入到文档中
cloneNode 返回的是一个孤立节点，不会自动出现在页面上，必须显式添加：
立即学习“Java免费学习笔记（深入）”；
- 用
appendChild()插入到某个父容器末尾 - 用
insertBefore()插入到指定位置前 - 用
replaceChild()替换原有节点
示例：
const parent = document.body; const copy = original.cloneNode(true); parent.appendChild(copy); // 添加到 body 底部
注意事件监听器和动态属性不会被复制
cloneNode() 只复制 HTML 结构和属性（如 id、class、style），但不会复制：
- 通过
addEventListener()绑定的事件监听器 - JavaScript 动态设置的属性（如
element.dataset.foo = 'bar'不一定保留） - 表单元素的当前值（如
<input value="user input">的输入内容不会被克隆）
如果需保留交互逻辑，复制后要重新绑定事件或同步状态。
避免 ID 冲突
若原节点有 id 属性，复制后会存在重复 ID（违反 HTML 唯一性规范）。建议复制后手动修改：
const copy = original.cloneNode(true); copy.id = copy.id + '-copy'; // 或用其他策略生成唯一 ID
