如何使用 JavaScript 清空 DOM 元素

作者

使用 JavaScript 清空 DOM 元素

How to empty a DOM element using JavaScript

使用该replaceChildren()方法清空元素，例如
element.replaceChildren(). 当replaceChildren调用该方法而不向其传递任何参数时，该方法会清空其所有子元素的元素。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

box.replaceChildren();

我们调用了
replaceChildren
方法，但没有给它传递任何参数，这清空了它所有子元素的元素。

该方法还可用于用提供的一组子元素替换元素的现有子元素。
索引.js
const box = document.getElementById('box');

const p1 = document.createElement('p');
p1.innerHTML = `<span style="background-color: lime">Apple</span>`;

const p2 = document.createElement('p');
p2.innerHTML = `<span style="background-color: orange">Orange</span>`;

box.replaceChildren(p1, p2);

// ✅ If you have a collection of elements
// use spread operator (...) to unpack the collection
// box.replaceChildren(...[p1, p2]);

通过使用该replaceChildren方法，我们可以一步清空元素并向其添加一组新的子元素，这样会更快一些。

该方法采用一个或多个Node对象或字符串，用它们替换元素的现有子元素。

使用 textContent 清空 DOM 元素

要清空 DOM 元素，请将元素的textContent属性设置为空字符串，例如element.textContent = ''. 元素上的设置textContent会删除其所有子节点，并用提供值的单个文本节点替换它们。

索引.js
const box = document.getElementById('box');

box.textContent = '';

textContent
属性可用于读取和设置元素的文本内容。

当使用该属性设置节点的文本内容时，元素的所有子元素都将被删除并替换为提供的字符串值。

在上面的示例中，我们有效地用空字符串替换了元素的所有子元素。

您可能还会看到innerHTML以类似方式使用的属性。

索引.js
const box = document.getElementById('box');

box.innerHTML = '';

这实现了相同的结果，但是它可能会更慢，因为设置
innerHTML属性使用浏览器的 HTML 解析器。

该textContent属性不使用浏览器的 HTML 解析器，如果元素有很多子元素，它可能会更快。

您选择哪种方法是个人喜好的问题。我会选择该方法，因为它直接、易于阅读并且可用于一步替换已删除的子元素。 replaceChildren

–

发表评论