上一篇
appendChild 和 removeChild）
appendChild 用于向节点添加子节点，removeChild 用于从节点中移除子节点。两者都是 DOM 操作方法。
appendChild 和 removeChild 方法
appendChild 方法
1、描述：
appendChild 是 JavaScript 中的一个方法，用于将一个节点添加到指定父节点的子节点列表末尾，它接受一个参数，即要添加的节点。
2、语法：
“`javascript
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、语法：
“`javascript
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>
“`
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/189180.html
