✅ 移动多个元素（原地剪切 + 粘贴）

使用 appendChild() 可将元素从原父节点“移出”，并插入到目标容器末尾。由于 appendChild() 会自动从原位置解绑元素，无需手动 remove()，且多次调用会按顺序追加：

const destination = document.querySelector('ul.there');
document.querySelectorAll('ul.here > li').forEach(el => {
  destination.appendChild(el); // 直接移动，原 ul.here 中对应 li 消失
});

⚠️ 注意：appendChild() 是“移动”而非“复制”。执行后，ul.here 将变为空，所有 均出现在 ul.there 中。

✅ 复制多个元素（保留原内容 + 新增副本）

若需保留原始结构，仅新增副本，则使用 cloneNode(true)（true 表示深克隆，包含子节点和事件监听器等）：

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

⚠️ 注意：克隆后的元素是全新节点，不继承原元素绑定的事件监听器（除非手动重新绑定），且 id 属性若存在将重复，建议克隆后重置 id 避免冲突。

? 完整可运行示例（含样式）

  
text1
  
text2
  
text3





→ 移动到 there
⧉ 复制到 there

? 关键总结

• ✅ 适用范围广：querySelectorAll() 支持任意 CSS 选择器（如 '.box > div'、'section article'），不限于
• ；
• ✅ 顺序保障：forEach() 遍历顺序与 DOM 中原始顺序一致，追加结果自然有序；
• ⚠️ 避免重排陷阱：不要在循环中直接操作 childNodes 或 children（它们是实时集合），querySelectorAll() 返回静态 NodeList，更安全；
• ? 进阶提示：如需插入到目标容器开头，可用 destination.insertBefore(clonedEl, destination.firstChild)；如需插入到指定位置，可结合 insertAdjacentElement()。

掌握 appendChild() 与 cloneNode(true) 的组合使用，即可高效、可靠地完成多元素批量迁移任务，无需依赖 jQuery 或大型框架。