JavaScript 节点操作中replaceWith怎么替换元素自身-js教程-PHP中文网

replacewith() 方法通过调用目标元素实例来直接替换 dom 树中的自身节点。只需获取需要被替换的 dom 元素，并传入新的 html 字符串、dom 节点或 documentfragment 作为参数，浏览器就会自动将原位置的内容更新为新内容，同时移除旧元素。

JavaScript 节点操作中replaceWith怎么替换元素自身

如何用新节点替换现有的 DOM 元素

要替换一个已存在的元素，首先需要通过 querySelector 等选择器获取该元素的引用，然后直接在其上调用 replaceWith 方法。该方法接受多种类型的参数，包括 HTML 字符串、现有的 DOM 节点对象或 DocumentFragment。当传入新节点时，原节点会从文档中移除，新节点则占据其位置，且不会触发重排之外的额外开销，因为这是原生支持的直接操作。

JavaScript 节点操作中replaceWith怎么替换元素自身

<div id="target">Old Content</div>

<script>
const target = document.querySelector('#target');
const newDiv = document.createElement('div');
newDiv.textContent = 'New Content';
target.replaceWith(newDiv);
</script>

上述代码中，target 是原始元素，newDiv 是新创建的节点。执行后，#target 在 DOM 树中被 newDiv 取代。如果传入的是字符串，如 target.replaceWith('

Hello

')，浏览器会先解析字符串为节点再执行替换。注意，replaceWith 不支持链式调用返回新元素，它直接修改 DOM 结构。

如何批量替换多个匹配的元素

当需要替换多个具有相同特征的元素时，可以使用 querySelectorAll 获取 NodeList，然后遍历每个元素并调用 replaceWith。由于 replaceWith 会立即从 DOM 中移除当前元素，因此在遍历时需要注意不要影响后续迭代。通常使用 forEach 或传统 for 循环即可，因为 NodeList 是静态快照，不受 DOM 变化影响。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

JavaScript 节点操作中replaceWith怎么替换元素自身

Item 1
Item 2
Item 3

在这个例子中，所有 .item 元素都会被替换为元素。每个原始

都被移除，取而代之的是包含相同文本的新。这种方法适用于需要统一更改元素类型或结构的场景。如果需要在替换时保留事件监听器，需提前将监听器绑定到新元素上，因为 replaceWith 不会自动转移事件。

替换后原元素的引用是否还有效

调用 replaceWith 后，原元素的 JavaScript 引用仍然指向内存中的那个 DOM 对象，但该对象已从文档树中移除。这意味着你可以通过原引用访问其属性或方法，但任何尝试将其重新插入 DOM 的操作都会失败，除非显式地再次添加。此外，原元素不再参与布局计算，也不会响应 DOM 事件，除非手动重新附加到新的父节点。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南