replaceChild 是父节点方法，用于用新节点替换其直接子节点；需满足 newChild 和 oldChild 均为有效 Node、oldChild 必须是 parentNode 的直接子节点、newChild 不能是 oldChild 或其后代。
replaceChild 是 DOM 节点的方法，必须在父节点上调用，不能直接在要替换的旧元素上使用。它的作用是用一个新节点替换父节点下的某个已有子节点。
基本语法和前提条件
调用格式为：parentNode.replaceChild(newChild, oldChild)。
必须同时满足三个条件：
- newChild 和 oldChild 都必须是有效的 Node 对象（比如 Element、Text 等）
- oldChild 必须已经是 parentNode 的直接子节点，否则会报错 “The node to be replaced is not a child of this node”
- newChild 不能是 oldChild 自身，也不能是其后代节点（否则报错 “The new child element contains the parent”）
常见用法示例
假设 HTML 中有：<div id="container"><p id="old">旧内容</p></div>
想把 <p id="old"> 替换为一个新 <span>：
const container = document.getElementById('container');
const oldP = document.getElementById('old');
// 创建新节点
const newSpan = document.createElement('span');
newSpan.textContent = '新内容';
// 执行替换（注意：调用者是父节点 container）
container.replaceChild(newSpan, oldP);
执行后，DOM 变为：<div id="container"><span>新内容</span></div>
立即学习“Java免费学习笔记（深入）”；
替换前的常见检查和处理
为避免运行时报错，建议替换前做简单验证：
- 检查
oldChild.parentNode === parentNode，确认父子关系正确 - 如果不确定 oldChild 是否存在，可先用
parentNode.contains(oldChild)判断 - 若需多次替换或动态创建，推荐封装成函数，例如：
function safeReplace(parent, newEl, oldEl) {
if (oldEl && parent && oldEl.parentNode === parent) {
return parent.replaceChild(newEl, oldEl);
}
console.warn('替换失败：oldEl 不是 parent 的子节点');
}
注意 replaceChild 不会自动添加到文档其他位置
被替换掉的 oldChild 会被从 DOM 中移除，但它仍是一个有效节点对象，可以复用（比如插入到别处）或丢弃。
newChild 如果原本已在 DOM 中（比如从别处取来的），它会先被自动移出原位置，再插入到新位置 —— 这是 replaceChild 的默认行为，无需手动 detach。
