replaceWith 是 DOM 元素方法，用于完全替换当前元素（含标签、属性、内容）；支持传入节点、文本、HTML 字符串或多个混合参数，现代浏览器广泛支持，IE 需 Polyfill 或用 replaceChild 模拟。
replaceWith 是 DOM 元素的方法，用于用一个或多个新节点（元素、文本、DocumentFragment 等）**完全替换当前元素本身**，包括它的标签、属性和内容。它不作用于字符串，而是直接操作 DOM 节点。
基本用法：传入新节点或字符串
调用对象必须是已挂载的 DOM 元素（Element），不能是字符串或 jQuery 对象（除非解包）：
- 传入一个 HTML 字符串 → 浏览器会解析为节点后插入（注意：仅限字符串字面量，不执行脚本）
- 传入一个 Element、Text、DocumentFragment 等节点 → 直接移动或插入
- 可一次传入多个参数（支持展开）
示例：
<div id="old">旧内容</div>立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const oldDiv = document.getElementById('old');
const newSpan = document.createElement('span');
newSpan.textContent = '新元素';
oldDiv.replaceWith(newSpan); // ✅ 替换成功：div 被 span 完全取代
// 页面中不再有 #old，取而代之的是这个 span
用 HTML 字符串替换（简洁但需注意安全）
传入字符串时，浏览器自动解析并创建对应节点（只解析顶层节点，不递归处理子节点中的 script）：
const el = document.querySelector('.target');
el.replaceWith('<p>这是新段落</p><hr>'); // ✅ 插入 p 和 hr 两个兄弟节点
⚠️ 注意：该字符串不会被当作模板执行，也不支持变量插值；若含用户输入，务必先转义或使用 createElement 避免 XSS。
替换多个节点或混合类型
replaceWith 支持多个参数，可以混用元素、文本、字符串：
const box = document.getElementById('box');
const img = document.createElement('img');
img.src = 'icon.png';
const text = document.createTextNode('说明文字');
box.replaceWith(img, text, '<small>（已更新）</small>');
// 原来的 #box 元素消失，页面中按顺序出现 img、纯文本、small 元素
兼容性与替代方案
replaceWith 在现代浏览器中广泛支持（Chrome 54+、Firefox 49+、Edge 17+、Safari 10+）。如需兼容老版本（如 IE），可用以下方式模拟：
if (!Element.prototype.replaceWith) {
Element.prototype.replaceWith = function(...nodes) {
const parent = this.parentNode;
if (parent) {
nodes.forEach(node => {
parent.insertBefore(
node instanceof Node ? node : document.createTextNode(node),
this
);
});
parent.removeChild(this);
}
};
}
不过更推荐用 parentNode.replaceChild(newNode, oldNode) 手动实现，逻辑更明确、可控性更强。
