当前位置：首页 > 知识问答 > appendChild 和 removeChild）

知识问答

appendChild 和 removeChild）

2025-09-12 03:45:01 来源：互联网转载

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>

<p>Hello World!</p>

</p>

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" 的 p 元素中。

removeChild 方法

1、描述：

removeChild 是 JavaScript 中的一个方法，用于从指定父节点的子节点列表中移除一个节点，它接受两个参数，即要移除的节点和可选的替换节点。

2、语法：

“`javascript

parentNode.removeChild(childNode, replacementNode);

“`

3、参数：

parentNode：表示要从中移除子节点的父节点。

childNode：表示要移除的子节点。

replacementNode（可选）：表示要替换被移除子节点的新节点，如果未提供，则被移除的子节点将从其父节点中完全删除。

4、返回值：

无返回值。

5、示例：

“`html

<p>Hello World!</p>

<p>This is a paragraph to be removed.</p>

<p>This is another paragraph.</p>

</p>

<button onclick="removeParagraph()">Remove Paragraph</button>

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 p

}

</script>

“`

removechild

上一篇：如何解决Windows 10系统中的无法定位序数错误？

下一篇：快手名字注册了怎么改

知识问答

appendChild 和 removeChild）

appendChild 方法

removeChild 方法

最新文章

热门文章