使用 JavaScript 清除 Div 元素的内容
使用 replaceChildren() 方法清除 div 元素的内容，例如 div.replaceChildren()。 当调用 replaceChildren 方法而不向其传递任何参数时，该方法会清空其所有子元素的元素。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const container = document.getElementById('container');
container.replaceChildren();
我们在没有传递任何参数的情况下调用了 replaceChildren 方法，这清除了 div 元素的内容。
该方法还可用于用提供的一组子元素替换元素的现有子元素。
const container = document.getElementById('container');
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>`;
container.replaceChildren(p1, p2);
通过使用 replaceChildren 方法，我们可以一步清除 div 的内容并向其中添加一组新的子项，这样会更快一些。
该方法采用一个或多个 Node 对象或字符串，用它们替换元素的现有子项。
这是一个在单击按钮时清除 div 元素内容的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="container">
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
</div>
<button id="btn">Clear div contents</button>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const container = document.getElementById('container');
const btn = document.getElementById('btn');
btn.addEventListener('click', function handleClick() {
container.replaceChildren();
});
我们向按钮元素添加了一个点击事件监听器。
每次单击按钮时，都会调用 handleClick 函数，我们只需调用 replaceChildren 方法即可。
使用 textContent 清空 DOM 元素
要清除 div 元素的内容，请将元素的 textContent 属性设置为空字符串，例如 div.textContent = ''. 在元素上设置 textContent 会删除其所有子元素，并将它们替换为提供值的单个文本节点。
const container = document.getElementById('container');
container.textContent = '';
textContent 属性可用于读取和设置元素的文本内容。
当使用该属性设置节点的文本内容时，元素的所有子元素都将被删除并替换为提供的字符串值。
在上面的示例中，我们有效地用空字符串替换了所有 div 的子元素。
我们可能还会看到以类似方式使用 innerHTML 属性。
const container = document.getElementById('container');
container.innerHTML = '';
这实现了相同的结果，但是，它可能会更慢，因为设置 innerHTML 属性使用浏览器的 HTML 解析器。
textContent属性不使用浏览器的 HTML 解析器，如果元素有很多子元素，它可能会更快。
选择哪种方法是个人喜好的问题。 我会选择 replaceChildren 方法，因为它直接、易于阅读并且可用于一步替换已删除的子元素。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
