replaceChild()方法通过父节点调用，用新节点替换旧节点，需明确获取父节点、旧节点和新节点；新节点若已在文档中会自动移除原位置，旧节点非父节点子元素时抛出NotFoundError。
用 replaceChild() 方法可以替换 DOM 中的指定子节点，核心是“用新节点替换旧节点”，且必须在父节点上调用。
确认父节点、旧节点和新节点
替换操作不能直接在目标节点上进行，必须通过它的父元素调用 replaceChild(newNode, oldNode)。因此要先获取三者：
-
父节点：可通过
oldNode.parentNode获取，或提前用querySelector选中容器 -
旧节点：要被替换的那个元素，比如
document.getElementById('target') -
新节点：可以是新创建的元素（
document.createElement），也可以是文档中已存在的其他节点（移动过去）
基本替换写法（创建新元素）
最常见场景：用一个全新构造的元素替换原有节点。
const oldDiv = document.getElementById('old');
const parent = oldDiv.parentNode;
const newDiv = document.createElement('div');
newDiv.id = 'new';
newDiv.textContent = '这是新内容';
parent.replaceChild(newDiv, oldDiv); // 替换成功
注意节点归属与重复问题
如果新节点原本就在文档中（比如从别处移过来），它会自动从原位置被移除，再插入到新位置 —— DOM 节点不能同时存在于两个地方。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 若新节点尚未添加到文档中，
replaceChild会把它加入；若已在文档中，会先移出再放入 - 不能用同一个元素对象反复替换多个节点，除非先
cloneNode(true) - 若
oldNode不是parent的子节点，会抛出NotFoundError
更简洁的现代写法（可选）
ES6+ 中可用 before() + remove() 组合实现类似效果，语义更清晰：
const oldDiv = document.getElementById('old');
const newDiv = document.createElement('div');
newDiv.textContent = '新内容';
oldDiv.before(newDiv); // 插入到 oldDiv 前面
oldDiv.remove(); // 再删掉 oldDiv
这种方式不要求显式获取父节点，适合简单替换，但注意它不是原子操作（中间会短暂存在两个节点）。
