clonenode(true)深克隆节点及全部子节点，clonenode(false)浅克隆仅当前节点标签与属性；克隆后需手动插入文档，且不复制事件监听器、js属性和表单实时值。

用 cloneNode() 方法可以克隆 DOM 节点，它返回原节点的副本，但不自动插入到文档中，需手动添加。

基础用法：深克隆与浅克隆

cloneNode() 接收一个布尔值参数：

• true：深克隆 —— 克隆节点及其所有子节点、属性、文本内容（推荐多数场景）
• false：浅克隆 —— 只克隆当前节点本身，不包含子节点和后代

例如：

const original = document.getElementById('myDiv');
const deepCopy = original.cloneNode(true); // 包含内部所有 HTML
const shallowCopy = original.cloneNode(false); // 仅空的

克隆后必须手动插入文档

克隆出来的节点是“游离”的，不会自动出现在页面上。需要调用 appendChild()、insertBefore() 等方法显式添加：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

document.body.appendChild(deepCopy);
// 或插入到某个容器内
document.querySelector('.container').appendChild(deepCopy);

注意克隆时的特殊行为

克隆会复制节点结构和属性，但以下内容不会被继承或复制：

• 事件监听器（addEventListener 绑定的函数不会自动复制）
• 元素的 JavaScript 属性（如 element.myData = 'xxx' 这类自定义属性）
• 表单元素的当前值（如 <input> 的 value 属性值在克隆时取的是初始 value 属性，不是用户输入后的实时值）

若需保留交互逻辑，克隆后要重新绑定事件或同步状态。

实用小技巧：克隆并修改后插入

常配合 querySelector、setAttribute、textContent 等方法快速生成相似结构：

const template = document.querySelector('.item-template');
const newItem = template.cloneNode(true);
newItem.querySelector('h3').textContent = '新标题';
newItem.setAttribute('data-id', '123');
document.querySelector('.list').appendChild(newItem);

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