replaceChild 是 DOM 方法，用于父节点用新节点完全替换其现有子节点；要求调用者为父节点、首参为新节点、次参为该父节点下真实存在的旧子节点。
replaceChild 是 DOM 节点的方法，用于用一个新节点**完全替换**父元素下的某个已有子节点。它不操作文本内容，只处理节点层级关系。
基本语法和前提条件
必须满足三个条件才能成功调用：
- 调用者是父节点（比如
div、ul等容器元素） - 第一个参数是新节点（可以是新建的元素、文档片段，或已存在的其他节点）
- 第二个参数是要被替换的旧子节点（必须是该父节点当前真实的子节点，否则报错）
常见用法示例
假设 HTML 中有：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
你想把 <p id="old"> 换成一个新 <h2>：
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById('container');
const oldP = document.getElementById('old');
const newH2 = document.createElement('h2');
newH2.textContent = '新标题';
container.replaceChild(newH2, oldP); // ✅ 成功：新节点替换旧节点
注意事项和易错点
- 如果传入的旧节点不属于当前父节点（比如从另一个 div 拿来的），会抛出
NotFoundError - 新节点如果已在 DOM 中存在，会被自动从原位置移走，再插入到新位置（DOM 节点不能重复出现）
- 不能用字符串直接替换——
replaceChild只接受 Node 对象，不是字符串；想替换文本内容请用textContent或innerHTML - 没有内置的“查找并替换”功能，必须先通过
getElementById、querySelector等拿到旧节点引用
替代方案参考
现代开发中，有时用更直观的方式实现类似效果：
-
oldNode.replaceWith(newNode)—— 直接在旧节点上调用，更简洁（IE 不支持） -
parentNode.insertBefore(newNode, oldNode); parentNode.removeChild(oldNode);—— 手动插入+删除，兼容性最好
