replacewith() 是原生 dom 方法，用新节点或字符串完全替换当前元素自身，不兼容 ie；需注意其与 innerhtml 的本质区别（移除整个元素 vs 仅更新子内容），并防范 xss 等风险。
replaceWith() 是现代 DOM API 提供的原生方法，可以直接用一个或多个新节点（或字符串）替换当前元素自身，无需手动找父节点、调用 removeChild 或 insertBefore。它简洁、安全，且会自动处理文本节点、元素节点、DocumentFragment 等多种类型。
基本用法：直接替换当前元素
调用对象是目标 DOM 元素本身，传入一个或多个参数（节点、字符串、DocumentFragment），原元素将被完全移除，新内容插入到其原来的位置：
- ✅ 正确示例：
const oldDiv = document.getElementById('old');
const newSpan = document.createElement('span');
newSpan.textContent = '我是新内容';
oldDiv.replaceWith(newSpan); // oldDiv 被移除，newSpan 插入原位置
- ✅ 支持多个参数（按顺序插入）：
const el = document.querySelector('.target');
el.replaceWith(
document.createElement('header'),
'纯文本',
document.createElement('footer')
);
// 原 .target 元素被这三个节点/字符串依次替换
注意 replaceWith 不支持 IE，需考虑兼容性
replaceWith() 在 IE 中完全不支持（包括 IE11），如需兼容旧浏览器，必须降级处理：
- 先获取父节点
parentNode - 用
replaceChild(newNode, oldNode)替换 - 或用
before()+remove()组合模拟（但要注意顺序和父节点存在性）
推荐封装一个兼容函数：
function safeReplaceWith(el, ...nodes) {
if (el.replaceWith) {
el.replaceWith(...nodes);
} else {
const parent = el.parentNode;
if (parent) {
nodes.forEach(node => parent.insertBefore(
node instanceof Node ? node : document.createTextNode(node),
el
));
el.remove();
}
}
}
replaceWith 和 innerHTML 的关键区别
很多人误以为 innerHTML = 'xxx' 是“替换元素”，其实它只是清空并重写子内容，**元素本身还在 DOM 树中**；而 replaceWith() 是真正移除整个元素节点，再插入新节点：
-
el.innerHTML = '<p>hello</p>'→el还在，只是子节点变了 -
el.replaceWith('<p>hello</p>')→el被彻底删除，DOM 中出现一个新<p></p>元素 - 事件监听器、引用、绑定的数据（如 Vue/React 的响应式代理）不会自动迁移，需手动处理
常见陷阱与建议
- ⚠️ 不能在被替换元素内部调用
replaceWith()—— 比如在click事件处理器里对this调用，没问题；但如果该元素已被其他代码提前移除，调用会静默失败 - ⚠️ 字符串参数会被当作 HTML 解析（类似
insertAdjacentHTML('beforebegin', str)），不是纯文本；如需插入纯文本，应显式创建Text节点或用document.createTextNode(str) - ✅ 推荐优先使用节点对象而非字符串，避免 XSS 风险和解析开销
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
