appendChild 和 removeChild 方法
appendChild 方法
1、描述：
appendChild 是 JavaScript 中的一个方法，用于将一个节点添加到指定父节点的子节点列表末尾，它接受一个参数，即要添加的节点。
2、语法：
parentNode.appendChild(newNode);
“`
3、参数：
parentNode：表示要将新节点添加到其中的父节点。
newNode：表示要添加的新节点。
4、返回值：
返回被添加的新节点。
5、示例：
“`html
<!DOCTYPE html>
<html>
<head>
<title>appendChild Example</title>
</head>
<body>
<div id="parent">
<p>Hello World!</p>
</div>
<script>
var newParagraph = document.createElement("p");
var text = document.createTextNode("This is a new paragraph.");
newParagraph.appendChild(text);
var parentDiv = document.getElementById("parent");
parentDiv.appendChild(newParagraph);
</script>
</body>
</html>
“`
上述示例中，我们创建了一个新的段落元素 newParagraph，并将其添加到了具有 ID "parent" 的 div 元素中。
removeChild 方法
1、描述：
removeChild 是 JavaScript 中的一个方法，用于从指定父节点的子节点列表中移除一个节点，它接受两个参数，即要移除的节点和可选的替换节点。
2、语法：
parentNode.removeChild(childNode, replacementNode);
“`
3、参数：
parentNode：表示要从中移除子节点的父节点。
childNode：表示要移除的子节点。
replacementNode（可选）：表示要替换被移除子节点的新节点，如果未提供，则被移除的子节点将从其父节点中完全删除。
4、返回值：
无返回值。
5、示例：
“`html
<div id="parent">
<p>Hello World!</p>
<p>This is a paragraph to be removed.</p>
<p>This is another paragraph.</p>
</div>
<button onclick="removeParagraph()">Remove Paragraph</button>
<script>
function removeParagraph() {
var parentDiv = document.getElementById("parent");
var paragraphToRemove = parentDiv.getElementsByTagName("p")[1]; // Get the second paragraph element (index starts from 0)
parentDiv.removeChild(paragraphToRemove); // Remove the paragraph from the parent div
}
</script>
“`
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/628343.html
微信扫一扫