HTML | DOM appendChild() 方法(1)

📌 相关文章

📜 HTML | DOM appendChild() 方法(1)

📅 最后修改于: 2023-12-03 15:01:11.476000 🧑 作者: Mango

HTML | DOM appendChild() 方法

简介

appendChild() 方法是 HTML DOM 的一种操作方法，用于将一个新的子节点添加到指定元素的末尾。新的子节点可以是元素节点、文本节点或者其他类型的节点。

语法

parentNode.appendChild(newChild)

parentNode: 必需，表示要添加子节点的父节点。
newChild: 必需，表示要添加的新子节点。

返回值

appendChild() 方法返回新添加的子节点。对于不能拥有子节点的节点，比如 <br> 标签，返回的是输入的新节点。

示例

以下是一个示例，展示如何使用 appendChild() 方法添加新子节点：

<!DOCTYPE html>
<html>
<body>

<h2>使用 appendChild() 方法添加新子节点</h2>

<div id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</div>

<button onclick="addItem()">添加新项</button>

<script>
function addItem() {
  var newItem = document.createElement("li");
  var textNode = document.createTextNode("Sugar");
  newItem.appendChild(textNode);

  document.getElementById("myList").appendChild(newItem);
}
</script>

</body>
</html>

在上述示例中，我们创建了一个包含三个列表项的 <div> 元素。通过点击按钮，将新项 "Sugar" 添加到列表中。

注意事项

如果要将元素移动到不同的位置，可以使用 appendChild() 方法将其添加到新的位置，并在原位置删除。
如果要替换已有的子节点，可以使用 replaceChild() 方法。
某些节点类型（例如 <br> 标签）不能有子节点，对于这些节点，appendChild() 方法仍然可以将输入的新节点返回。

更多关于 appendChild() 方法的详细信息和用法，请参考 MDN Web Docs。

以上是关于 appendChild() 方法的介绍，希望对你有所帮助。