parentNode.replaceChild(newNode, oldNode)可替换DOM节点，需确保oldNode是父节点的真实子节点且newNode已创建；现代推荐用element.replaceWith()替代。

用 parentNode.replaceChild(newNode, oldNode) 方法可以替换页面中已有的旧节点。

确认新旧节点都存在且合法

替换前要确保：

• oldNode 是当前 DOM 树中的一个真实子节点（不能是文档片段或未挂载的节点）
• newNode 已创建好（可以是新元素、文本节点，或从别处移过来的节点）
• 两者有相同的父节点，或你明确知道 oldNode.parentNode 是目标父容器

基本替换写法

假设你想把 <div id="old">旧内容</div> 替换成一个新段落：

const oldDiv = document.getElementById('old');
const newP = document.createElement('p');
newP.textContent = '这是新内容';

// 执行替换（必须通过父节点调用）
oldDiv.parentNode.replaceChild(newP, oldDiv);

常见注意事项

容易出错的地方：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

立即学习“Java免费学习笔记（深入）”；

• 如果 oldNode 已被移除或没有父节点，oldNode.parentNode 是 null，会报错
• replaceChild 返回被替换掉的旧节点，可用来暂存或复用：const removed = parent.replaceChild(newNode, oldNode);
• 若想用 HTML 字符串替换，需先解析成节点：用 DOMParser 或临时 div.innerHTML + firstChild 提取

替代方案：remove + append（更现代简洁）

ES6+ 环境中，也可以分两步操作，语义更清晰：

const oldDiv = document.getElementById('old');
const newP = document.createElement('p');
newP.textContent = '新内容';

oldDiv.replaceWith(newP); // ✅ 更推荐，原生支持，一行搞定

注：Element.replaceWith() 在现代浏览器中已广泛支持（Chrome 54+/Firefox 49+/Edge 17+），兼容性足够好；如需支持 IE，仍需用 parentNode.replaceChild。