如何用 replaceWith 语法直接替换当前 DOM 节点为新元素-js教程-PHP中文网

replaceWith 是原生 DOM 方法，完全替换调用节点自身及子内容；支持元素、文本、HTML 字符串及多参数混合；需节点已挂载到 DOM 才生效；语义清晰，无需父节点引用。

如何用 replacewith 语法直接替换当前 dom 节点为新元素

replaceWith 是原生 DOM API 提供的方法，可以直接用新元素（或文本、节点列表）**完全替换调用它的当前节点本身**，包括该节点的所有子内容和自身标签。它不依赖 jQuery，现代浏览器（Chrome 65+、Firefox 49+、Edge 17+、Safari 11.1+）均支持。

基本用法：传入新元素或 HTML 字符串

你可以传入一个已创建的元素节点、多个节点，或者直接传入 HTML 字符串（会自动解析为节点）：

用已创建的元素替换：

旧内容

const oldDiv = document.getElementById('old');
const newSpan = document.createElement('span');
newSpan.textContent = '新内容';
oldDiv.replaceWith(newSpan); // <div>被整个移除，替换成 <span>新内容</span>
  
  <li>用 HTML 字符串替换（更简洁）：<br><pre class="brush:php;toolbar:false;">oldDiv.replaceWith('<p class="replaced">这是新段落</p>');

浏览器会将字符串解析为 DOM 节点并插入，oldDiv 自身消失。

支持多参数：一次替换为多个节点或混合内容

replaceWith 接收任意数量的参数，可以混用元素、文本、HTML 字符串：

oldDiv.replaceWith(
  '开头文本',
  document.createElement('hr'),
  '<strong>中间加粗</strong>',
  document.createTextNode('结尾纯文本')
);

原 ... 将被这四个内容**按顺序连续替换**，无包裹容器。

注意：不能在文档片段外对孤立节点调用

如果节点尚未添加到文档中（例如刚用 document.createElement 创建但未 append），调用 replaceWith 会静默失败（不报错，但无效果）。必须确保节点已在 DOM 树中，或至少是某个父节点的子节点。

安全写法示例：

const temp = document.createElement('div');
temp.innerHTML = '<span>待替换</span>';
const span = temp.firstElementChild;
// span 还没进 DOM → replaceWith 无效
span.replaceWith('<i>不会生效</i>'); // ❌

// 正确：先挂载再替换
document.body.appendChild(span);
span.replaceWith('<i>现在生效</i>'); // ✅