✅ 批量移动元素（原位删除，目标追加）

使用 appendChild() 移动节点时，若该节点已有父节点，浏览器会自动将其从原父节点中移除，再插入新父节点——这是 DOM 规范保证的原子行为，无需手动 remove()。

const destination = document.querySelector('ul.there');
document.querySelectorAll('ul.here > li').forEach(el => {
  destination.appendChild(el); // 直接移动，无需额外清理
});

⚠️ 注意：querySelectorAll() 返回的是静态 NodeList，遍历时可安全移动；若使用 getElementsByTagName() 等动态集合，则需反向遍历或转为数组，避免索引错乱。

✅ 批量复制元素（保留源，新增副本）

复制需调用 cloneNode(true)（true 表示深克隆，包含所有子节点和属性）。注意：克隆后的节点无事件监听器（需重新绑定），且 ID 若存在需手动去重（ID 必须唯一）。

const destination = document.querySelector('ul.there');
document.querySelectorAll('ul.here > li').forEach(el => {
  destination.appendChild(el.cloneNode(true)); // 创建独立副本并追加
});

? 完整可运行示例（含样式增强可视化）

  
text1
  
text2
  
text3




→ 移动到 .there
⧉ 复制到 .there
↺ 重置演示

? 关键要点总结

• 移动即重挂载：appendChild(el) 自动处理源节点移除，无需 el.remove()。
• 复制必克隆：el.cloneNode(true) 是唯一标准方式；浅克隆（false）仅复制标签，不含子内容。
• 选择器精准性：推荐 querySelectorAll('ul.here > li') 明确限定直接子元素，避免误选嵌套结构。
• 兼容性无忧：上述方法支持所有现代浏览器及 IE9+，无需依赖框架。
• 扩展建议：如需动画、过渡或异步处理，可在操作前后添加 CSS 类或 Promise 封装。

掌握这一基础 DOM 操作模式，可轻松适配