移动DOM节点应优先用appendChild()或insertBefore()，二者均自动从原父节点移除再插入新位置；勿误用cloneNode()造成重复节点；批量移动可用DocumentFragment提升性能。
直接用 appendChild() 就行 —— 它会自动先从原父节点移除，再添加到新容器中，无需手动调用 removeChild()。
用 appendChild() 移动节点（最常用）
DOM 节点只能有一个父节点。当你对一个已有父节点的元素调用 appendChild() 时，浏览器会自动把它从旧位置“剪切”过来，再“粘贴”到新容器末尾。
- 操作简单，一步到位，不易出错
- 适用于移动到目标容器的末尾
- 示例：
const node = document.getElementById('myDiv');<br>const newParent = document.getElementById('container');<br>newParent.appendChild(node); // 自动脱离原父节点
用 insertBefore() 插入到指定位置
如果不想放到末尾，而是插在某个子元素前面，就用 insertBefore()：
- 语法：
parent.insertBefore(node, referenceChild) -
referenceChild是目标容器内的一个子节点，新节点将插入到它前面；传null等价于appendChild - 同样会自动移除原位置，无需额外处理
- 示例：
const firstChild = newParent.firstChild;<br>newParent.insertBefore(node, firstChild); // 插到最前面
注意：别用 cloneNode() 除非真要复制
cloneNode(true) 生成的是副本，原节点还在老地方 —— 这不是“移动”，是“复制+追加”。如果误用了，会导致页面出现两个相同节点，容易引发逻辑或样式问题。
立即学习“Java免费学习笔记（深入）”；
- 移动 ≠ 复制，确认需求再选方法
- 如果确实需要保留原节点，再手动
removeChild()原来的，但通常没必要
小技巧：移动多个节点？用 DocumentFragment
想一次移动多个节点（比如把一组 li 换个 ul），可以先用 DocumentFragment 中转，避免频繁重排：
- 创建片段：
const frag = document.createDocumentFragment(); - 把要移动的节点逐个
appendChild()到片段里（它们会自动脱离原位） - 最后把整个片段
appendChild()到新容器 - 性能更好，尤其节点多时
