replacewith 是 dom 原生方法，用于直接替换当前节点；参数支持单个/多个元素或字符串，执行后原节点彻底移除且不可逆；现代浏览器支持，ie 不兼容，可 polyfill 降级。
replaceWith 是 DOM API 提供的原生方法，用于直接用新内容替换当前节点（包括元素、文本节点等），无需手动操作父节点。它比传统 parentNode.replaceChild(newNode, oldNode) 更简洁直观。
基本用法：传入一个或多个新节点/字符串
调用对象是**待被替换的节点本身**，参数可以是：
- 一个 DOM 元素（如
document.createElement('div')） - 一个文本字符串（会自动转为 Text 节点）
- 多个参数：支持同时传入多个节点或字符串，按顺序插入（类似
append()）
示例：
const oldDiv = document.getElementById('old');
const newSpan = document.createElement('span');
newSpan.textContent = '我是新内容';
// 替换为单个元素
oldDiv.replaceWith(newSpan);
// 替换为字符串（等价于 replaceWith(document.createTextNode('hello'))）
oldDiv.replaceWith('Hello World');
// 替换为多个内容：一个 span + 一段文本 + 一个空 div
oldDiv.replaceWith(newSpan, '中间文本', document.createElement('div'));
注意：原节点会被彻底移除，且不可逆
执行后，原节点从 DOM 中完全消失，不再属于任何父节点，也无法通过 oldDiv.parentNode 访问。如果后续还需使用该节点，需提前保存引用或重新创建。
常见误区：
- ❌
oldDiv.replaceWith(oldDiv)—— 会把自己删掉，再插入？不行，节点已脱离文档，插入会失败 - ❌ 在循环中对多个匹配节点调用
replaceWith时，若用querySelectorAll获取 NodeList，要注意它是静态的，但 DOM 变化不影响已获取的引用；不过若反复操作同一父容器下的多个兄弟节点，顺序和索引需留意
兼容性与降级方案
replaceWith 支持现代浏览器（Chrome 54+、Firefox 49+、Edge 17+、Safari 10+），不支持 IE。
如需兼容旧环境，可手写简易 polyfill：
if (!Element.prototype.replaceWith) {
Element.prototype.replaceWith = function() {
const parent = this.parentNode;
if (parent) {
const args = Array.from(arguments);
const fragment = document.createDocumentFragment();
args.forEach(arg => {
fragment.appendChild(typeof arg === 'string' ? document.createTextNode(arg) : arg);
});
parent.replaceChild(fragment, this);
}
};
}
结合 querySelector 和模板字符串快速替换
实用场景：批量更新某类元素内容，比如把所有 <p class="legacy"></p> 替换为语义更强的 <section></section>：
document.querySelectorAll('p.legacy').forEach(p => {
const section = document.createElement('section');
section.innerHTML = p.innerHTML; // 或用 textContent 保留纯文本
p.replaceWith(section);
});
也可直接用字符串模板（适合结构简单、无事件绑定的情况）：
p.replaceWith(`<section class="modern">${p.textContent}</section>`);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
