使用 JavaScript 删除所有子元素
- 使用 JavaScript 删除所有子元素
-
使用
innerHTML
属性删除 JavaScript 中的所有子元素 -
使用
textContent
属性删除 JavaScript 中的所有子元素 -
使用
removeChild()
方法删除 JavaScript 中的所有子元素 -
使用
remove()
函数删除 JavaScript 中的所有子元素 -
使用
replaceChildren()
函数删除 JavaScript 中的所有子元素 -
使用 jQuery 的
empty()
方法删除 JavaScript 中的所有子元素
本文旨在学习使用 JavaScript 删除所有子元素的不同方法。
这些不同的方法包括 innerHTML
、textContent
、removeChild()
、remove()
、replaceChildren()
、jQuery 的 empty()
方法和循环删除子节点。
使用 JavaScript 删除所有子元素
最简单的过程之一是 innerHTML
属性用于设置或返回 HTML 元素的内容,而 textContent
属性设置或返回所选节点及其子节点的文本内容。
考虑 MDN 文档,我们可以说 textContent
比 innerHTML
更快,因为浏览器不调用 HTML 解析器并快速替换所有子项。
remove()
函数从 DOM 中删除特定元素,而 removeChild()
方法从文档对象模型 (DOM) 中删除子元素(也称为子节点)并返回删除的元素/节点。如果孩子是 null
,它会给出 TypeError
。
另一方面,replaceChildren()
函数删除节点的所有子节点;它还设置了一个新的子节点数组(如果需要)。
你可以在此处找到有关它的更多详细信息。
我们的 HTML 启动代码中有两个子/节点;这就是我们使用 replaceChildren()
函数的原因;如果要替换一个子节点,也可以使用 replaceChild()
。
replaceChild()
获取要替换的旧节点和新节点。jQuery 的 empty()
函数从特定元素中删除内容和所有子节点。
HTML 代码保持不变(除了最后一个示例,你必须在 <head>
标记中包含 jQuery 库),但每个示例的 JavaScript 都会更改。
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>Remove Child Nodes</title>
</head>
<body>
<div id="parentDiv">
<span>
<p>this is a paragraph inside the span tag.</p>
</span>
</div>
<button id="btn" onclick="removeChildElement()">
Remove Child Elements
</button>
</body>
</html>
使用 innerHTML
属性删除 JavaScript 中的所有子元素
以下代码使用 innerHTML
属性删除所有子节点。
function removeChildElement(){
document.getElementById("parentDiv").innerHTML = '';
}
使用 textContent
属性删除 JavaScript 中的所有子元素
该代码使用 textContent
属性删除所有子元素。
function removeChildElement(){
document.getElementById("parentDiv").textContent = '';
}
使用 removeChild()
方法删除 JavaScript 中的所有子元素
使用带有循环功能的 removeChild()
,删除子节点。如果你单击 id 值为 btn
的按钮,此 JavaScript 代码将被执行。
请参阅下面给出的代码示例。
btn.onclick = () => {
const element = document.getElementById("parentDiv");
while (element.firstChild) {
element.removeChild(element.lastChild);
}
}
使用 remove()
函数删除 JavaScript 中的所有子元素
现在,在下面的代码中练习 remove()
函数。
function removeChildElement(){
const parent = document.getElementById("parentDiv")
while (parent.firstChild) {
parent.firstChild.remove()
}
}
使用 replaceChildren()
函数删除 JavaScript 中的所有子元素
是时候学习使用 JavaScript 删除所有子节点的 replaceChildren()
函数了。你可以看到下面给出的代码。
function removeChildElement(){
var element = document.getElementById("parentDiv");
element.replaceChildren();
}
使用 jQuery 的 empty()
方法删除 JavaScript 中的所有子元素
如果你对 jQuery 感到满意并正在寻找解决方案,你可以使用 empty()
方法。
function removeChildElement(){
$('#parentDiv').empty();
}
不要忘记在 HTML 代码的 <head>
标记中包含 jQuery 库。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>