用cloneNode(true)可深克隆节点及其全部子元素和文本内容，但不复制事件监听器、表单值、dataset及动态属性；推荐用<template>克隆避免副作用。
JavaScript 中复制 DOM 节点主要靠 cloneNode() 方法，它能生成结构一致的新节点，但要注意：**克隆的是静态结构，不是运行时行为**。
怎么用 cloneNode 复制节点
该方法接收一个布尔值参数，决定是否深克隆：
-
node.cloneNode(false)或node.cloneNode()：只复制当前节点本身，不带任何子元素或文本内容 -
node.cloneNode(true)：递归复制节点自身 + 所有子节点 + 文本内容，即“带全部后代的完整结构”
克隆后哪些东西不会自动带上
即使用了 true 深克隆，以下内容也不会被复制，必须手动处理：
- 通过
addEventListener绑定的事件监听器（DOM 规范明确不支持） - 表单控件的当前状态（如
<input>的value、<checkbox>的checked） - 动态设置的 JavaScript 属性（如
el.dataset.foo = 'bar'或el.myFlag = true） - 内联事件处理器（如
onclick="doSomething()"）也不被复制，且不推荐使用
怎么让克隆节点真正可用
要让克隆出来的节点具备交互能力，得主动补全缺失的部分：
立即学习“Java免费学习笔记（深入）”；
- 事件委托：把监听器绑定在父容器上，利用冒泡机制响应所有子孙节点（包括后续克隆的），适合列表类动态增删场景
-
封装初始化函数：把事件绑定、数据赋值等逻辑打包成函数，克隆后立即调用，例如：
function initItem(el) { el.addEventListener('click', handleClick); el.dataset.id = Date.now(); }const clone = original.cloneNode(true); initItem(clone); -
用 <template> 标签做模板：避免从真实 DOM 克隆带来的副作用（如意外触发动画、校验），更干净可控：
<template id="card"><div class="card"><h3>标题</h3><p>正文</p></div></template>const tmpl = document.getElementById('card').content.cloneNode(true);
一个小但关键的细节：ID 冲突
如果原节点有 id 属性，克隆后会存在重复 ID，违反 HTML 规范。建议克隆后立刻处理：
- 清空：
clone.id = '' - 重命名：
clone.id = original.id + '-copy'
