clonenode(true) 可高效复制含子节点和属性的 dom 节点，适合高频复用结构一致的 ui 模板；推荐用 存放纯净模板，克隆后需手动填充数据、重绑事件，并注意表单状态、富文本及 canvas 等内容无法自动继承。
使用 cloneNode(true) 可以快速复制一个包含全部子节点和属性的 DOM 节点，适合在需要高频创建结构一致的 UI 组件时复用模板，避免重复解析 HTML 字符串或手动构建节点树。
克隆前准备一个干净的模板节点
把要复用的结构定义为一个不可见的模板（如 <template></template> 或带 display:none 的 <div>），确保它只含结构、不绑定事件、不含动态数据。这样每次克隆都是“纯净”的起点。
<ul>
<li>推荐用 <code><template></template> 标签存放模板，它不会被渲染，且原生支持 content 属性访问文档片段
input.value、checked、selected 等属性onclick="..."），它们会被克隆但无法自动重绑定克隆后需手动处理动态内容与交互
cloneNode(true) 只复制 DOM 结构和属性，不复制 JavaScript 对象引用、事件监听器、自定义属性（如 node.dataset 是复制的，但 node.myData 不会）、或通过 JS 设置的样式（如 el.style.color = 'red'）。
- 用
querySelectorAll找到克隆体中的关键节点，填入新数据，例如：cloned.querySelector('.title').textContent = item.title - 为按钮、输入框等重新绑定事件，建议用事件委托或在克隆后调用统一初始化函数
- 若组件依赖框架（如 Vue/React），不要直接克隆其渲染出的真实 DOM，而应克隆原始模板并交由框架挂载
注意深层限制：表单控件状态与富文本内容
某些节点的状态无法通过 cloneNode 保留，尤其涉及用户输入或编辑场景：
-
<textarea></textarea>和<input>的value属性值在克隆时不会同步（DOM 属性值可能复制，但实际输入值属于“可选状态”，需手动赋值） -
contenteditable元素的内容需用innerHTML或textContent显式设置，克隆仅保留初始 HTML -
<canvas></canvas>的绘制内容、<video></video>的播放位置等完全不会被克隆，需额外恢复
性能对比与适用边界
相比 innerHTML += htmlString 或 document.createElement 链式创建，cloneNode(true) 在节点层级深、子元素多时更快，因为它跳过了 HTML 解析和 DOM 构建阶段。
- 实测：克隆一个含 50+ 子元素的卡片模板，比拼接字符串插入快约 2–3 倍（Chrome 120，中等配置）
- 但若每次克隆后都要遍历大量节点填数据，整体耗时可能反超；建议结合
DocumentFragment批量操作再挂载 - 不适合需要强隔离的场景（如多个克隆体需独立响应式更新），此时应优先考虑虚拟 DOM 或轻量级模板引擎
