使用 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 方法，因为它直接、易于阅读并且可用于一步替换已删除的子元素。
相关文章
在 HTML 中创建一个可滚动的 Div
发布时间：2023/05/06 浏览次数：54 分类：HTML
-
本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动，并通过示例查看它们的实现。
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
使用 CSS 绝对定位居中 Div
发布时间：2023/04/28 浏览次数：127 分类：CSS
-
本文介绍了如何使用 absolute 属性在 div 类中水平、垂直或水平和垂直方向居中一个元素或一组元素，即使宽度已知或未知。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
