HTML | DOM appendChild() 方法

简介

在 HTML 中，DOM (文档对象模型) 是用于访问和操作 HTML 元素的编程接口。其中的 appendChild() 方法可以向指定元素添加新的子节点。

语法

element.appendChild(node)

参数

• node：要添加为子节点的节点对象。

返回值

被添加的节点对象。

使用示例

// 创建一个新的段落元素
var p = document.createElement("p");
p.innerHTML = "新的段落";

// 获取现有的父元素
var parent = document.getElementById("parent");

// 将新的段落添加为父元素的子节点
parent.appendChild(p);

说明

• appendChild() 方法将指定的节点添加为指定父节点的最后一个子节点。如果添加的节点已经存在于 DOM 树中，会自动从当前位置移动到指定的父节点下。
• 如果使用 appendChild() 方法将已有的节点添加到其他地方，那此节点将会被从原来的位置上移除。
• 通过此方法添加的节点将会按照添加的顺序排列。

注意事项

• 在使用 appendChild() 方法前，需要先创建或获取要添加的节点对象。
• 如果要添加的节点对象已经存在于 DOM 树中，添加操作会引起该节点对象在 DOM 树中的位置发生改变。
• 添加已存在的节点为子节点时，如果该节点在 DOM 树中已有父节点，则会先从原来的位置上移除。

更多关于 appendChild() 方法的详细信息，请参考 MDN 文档。