cloneNode(true) 实现深度复制，递归复制节点及其所有子节点、属性和文本内容，但不复制事件监听器、表单实时值、动态属性及特殊节点状态，克隆后需手动插入文档并处理重复 id 等问题。

cloneNode 方法可以复制 DOM 节点，但要实现“深度复制”，关键在于传入 true 作为参数。

基本用法：true 表示深克隆，false 表示浅克隆

调用 node.cloneNode(true) 会递归复制该节点及其所有子节点、属性、文本内容，但不复制事件监听器、表单元素的当前值（如 的 value）、或动态添加的属性（如 node.dataset.custom）。

• element.cloneNode(false)：只复制自身，不包含子节点
• element.cloneNode(true)：复制自身 + 所有后代节点（即深度复制）

注意：克隆后需手动挂载到文档中

克隆出的新节点是“游离”的，不会自动出现在页面上，必须显式插入：

• 用 parent.appendChild(clonedNode)
• 或 parent.insertBefore(clonedNode, refNode)
• 也可先修改克隆体（如改 id、class、内容），再插入

常见坑点提醒

深度克隆不等于“完全等价”：

• 绑定的事件监听器不会被复制（需重新 addEventListener）
• 表单控件的实时值（如用户输入的 input.value）不会被保留，只会复制初始 value 属性值
• id 属性会被原样复制，可能导致重复 id —— 建议克隆后手动重设：cloned.id = 'new-id'
• 某些特殊节点（如 的绘图内容、 的播放状态）也不会被克隆

简单示例

假设有如下 HTML：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

Hello

World

执行：

const box = document.getElementById('box');
const clone = box.cloneNode(true);
clone.id = 'box-clone';
document.body.appendChild(clone);

结果：整个

... 结构被完整复制并追加到 body 尾部，且新 div 的 id 已更新。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南