appendChild会自动移除原位置节点，因为DOM规范要求一个节点同一时刻只能有一个父节点，故浏览器在插入前先解除其与原父节点的关系，再挂载到新父节点，整个过程为原子操作。
当使用 appendChild 将一个**已存在于 DOM 中的节点**添加到另一个父元素时，浏览器会自动将其从原父节点中移除，再插入到新位置——无需手动调用 removeChild。
为什么 appendChild 会自动移除原位置节点？
DOM 规范规定：一个节点在同一时刻只能有一个父节点。因此，当你把一个已有父节点的元素（比如 div#old）用 appendChild 添加到新父元素时，浏览器内部会先执行“解除与原父节点的关系”，再挂载到新父节点下。这是一个原子操作，没有中间状态。
实际效果示例
假设 HTML 如下：
<div id="box1"><p id="target">Hello</p></div> <div id="box2"></div>
执行以下 JavaScript：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
const target = document.getElementById('target');
const box2 = document.getElementById('box2');
box2.appendChild(target);
结果是：<p id="target">Hello</p> 从 #box1 中消失，并出现在 #box2 末尾。整个过程一步到位。
需要注意的细节
-
只对已有父节点的元素生效：如果目标节点尚未被添加到 DOM（例如刚用
document.createElement创建但未插入），appendChild就只是普通追加，不会触发移除逻辑。 - 移动的是节点本身，不是副本：它不是克隆，而是真实迁移，所有事件监听器、属性、子节点都保留（除非你显式移除了监听器）。
-
不适用于 DocumentFragment 的“移动”场景：DocumentFragment 没有父节点，往里
appendChild不会触发移除；但把它插入到真实 DOM 时，其中的子节点会按顺序被“搬过去”，原 fragment 变为空。
和 insertBefore / replaceChild 的关系
appendChild 是最简化的“移动并追加”方式。如果你需要更精确控制插入位置（比如插到某个子元素前面），可用 insertBefore(newChild, referenceChild)，它同样具备自动移除原父节点的能力。而 replaceChild(newChild, oldChild) 则要求两个参数都是已挂载节点，也会自动处理旧节点的卸载。
