replaceChild()通过父节点用新节点替换旧节点，要求旧节点必须是父节点的直接子节点；现代推荐使用兼容性更好的replaceWith()方法。
用 replaceChild() 方法可以替换页面中已有的 DOM 节点，核心是“新节点换旧节点”，且必须通过父节点来操作。
明确父子关系：替换必须通过父元素调用
DOM 中没有直接在子节点上执行“自我替换”的方法。你得先获取要被替换的旧节点，再拿到它的父节点，最后用父节点的 replaceChild(newNode, oldNode) 完成替换。
- 第一个参数是新节点（可以是新建的元素、文本节点，或从别处移过来的现有节点）
- 第二个参数是旧节点（必须是该父节点的直接子节点）
- 如果旧节点不在父节点下，会报错：
NotFoundError
常用替换方式示例
① 替换为新建的元素
const oldDiv = document.getElementById('old');
const parent = oldDiv.parentNode;
const newDiv = document.createElement('div');
newDiv.textContent = '这是新内容';
parent.replaceChild(newDiv, oldDiv);
② 替换为已有节点（相当于移动位置）
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const oldP = document.querySelector('p');
const newSpan = document.querySelector('span');
oldP.parentNode.replaceChild(newSpan, oldP); // span 原来在哪不重要，现在插到 p 的位置
③ 用 innerHTML + insertAdjacentElement 组合实现“视觉替换”（适合简单场景）
虽然不是原生 replaceChild，但更直观：
const target = document.getElementById('old');
target.insertAdjacentHTML('beforebegin', '<div>新内容</div>');
target.remove();
注意：这种方式会丢失旧节点上的事件监听器和 JS 引用，replaceChild 则保留父级关系逻辑更清晰。
注意事项和易错点
- 不能跨父级替换：newNode 和 oldNode 不必同类型，但 oldNode 必须是调用者（父节点）的子节点
- 替换后 oldNode 仍存在，只是脱离 DOM，可继续复用或修改
-
文本节点也能被替换：比如用
document.createTextNode('新文字')替换某个 Text 节点 - 现代写法中，
element.replaceWith(newElement)更简洁（支持多个参数，兼容性 IE 不支持）
推荐现代替代方案：replaceWith()
如果不需要兼容 IE，直接用元素自身的 replaceWith() 方法最方便：
const oldEl = document.getElementById('old');
const newEl = document.createElement('section');
newEl.innerHTML = '<h2>标题</h2>';
oldEl.replaceWith(newEl); // 一行搞定，语义清晰
它还支持传多个节点或字符串：oldEl.replaceWith(el1, el2, '纯文本');
