replaceChild 替换节点需先创建新节点，再用父节点调用 replaceChild(newNode, oldNode)，要求 oldNode 必须是该父节点的直接子节点，否则报错；新节点可新建或移入，若有父节点会自动移除。
用 replaceChild 替换页面中的旧节点，核心是：先创建新元素，再调用父节点的 replaceChild(newNode, oldNode) 方法。它不会自动插入或查找，必须明确指定“谁替换谁”以及“在谁下面替换”。
确保 new 和 old 节点都存在且属于同一父级
replaceChild 要求两个参数都是有效节点，且 oldNode 必须是调用该方法的父节点的直接子节点。如果 oldNode 不在父节点中，会报错：Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
- 检查
oldNode.parentNode === parentNode是否为真 - 新节点可以是新创建的（
document.createElement），也可以是从别处移过来的（移走后就脱离原位置） - 若新节点已有父节点，调用前会被自动从原父节点中移除
基本操作步骤（三行关键代码）
以替换一个 ID 为 header 的旧标题为例：
const oldHeader = document.getElementById('header');
const newHeader = document.createElement('h1');
newHeader.textContent = '欢迎来到新首页';
// 确保 oldHeader 有父节点
if (oldHeader && oldHeader.parentNode) {
oldHeader.parentNode.replaceChild(newHeader, oldHeader);
}
常见实用场景与写法
实际开发中常配合模板字符串、组件函数或动态数据使用：
-
用 innerHTML 构建新内容后替换：
const newDiv = document.createElement('div'); newDiv.innerHTML = '<p>更新后的</p><button>点击</button>'; parent.replaceChild(newDiv, oldDiv); -
复用已有节点（比如从文档片段中取）：
const frag = document.createDocumentFragment(); frag.appendChild(someElement); parent.replaceChild(frag, oldNode); // frag 替换 oldNode，frag 自动清空 -
替换时保留旧节点的部分属性（如 class、dataset）：
newEl.className = oldEl.className; newEl.dataset.id = oldEl.dataset.id; parent.replaceChild(newEl, oldEl);
注意 replaceChild 不会触发重排/重绘优化
它和 appendChild 或 insertBefore 一样，是同步 DOM 操作。频繁调用可能影响性能，尤其在循环中。如需批量更新，建议先用 DocumentFragment 组装好新结构，再一次性替换。
不复杂但容易忽略：替换后，旧节点仍存在于内存中（只是断开连接），可继续读取属性或重新插入；新节点则正式成为 DOM 树一部分，可立即被样式、事件等作用。
