JavaScript appendchild() 方法

appendChild() 是 JavaScript 中 Node 接口的一个方法。appendChild() 方法使我们能够将一个节点 **添加到** 指定 **父节点** 的子节点列表的末尾。

语法

appendchild() 方法的语法是

在语法中，childNode 是添加到指定父节点的新节点。appendChild() 方法返回被添加的子节点。如果 childNode 是文档中现有节点的一部分，appendChild() 方法会将其从当前位置移动到新位置。

JavaScript appendChild() 方法示例

现在，我们将通过几个 appendChild() 的示例来帮助理解它是如何工作的。

示例 1：简单的 appendChild() 示例

如果我们有一个 HTML 列表，并想在末尾添加一个新项，我们可以使用 appendChild() 方法。

输出： 执行上述代码后，我们将得到如下输出

正如我们在上面看到的，有一个 **Append** 按钮，当我们点击这个按钮时，appendChild() 方法会将子节点值添加到其父节点，如下所示。

示例 2：动态添加多个节点

在这个例子中，我们在父节点中动态地添加多个节点。

输出： 执行上述代码后，我们将得到如下输出

正如我们在屏幕截图中看到的，有一个 **Submit** 按钮。当我们点击这个按钮时，appendChild() 方法会动态地添加多个子节点，如下所示。

说明

• 首先，我们使用 createElement() 函数创建一个新的 <ul> 元素。
• 之后，我们动态创建 <li> 元素并将其添加到 <ul> 中。
• 最后，我们将 <ul> 元素添加到 <div> 中。

示例 3：在文档中移动节点

现在，让我们看一个例子来理解如何将一个节点移动到文档中的其他位置。

输出： 执行上述代码后，我们将得到如下输出

说明

1. 首先，我们需要使用 querySelector() 从 **第一个列表** 中选择 **第一个元素**。
2. 现在，选择 **第一个列表** 的 **第一个子元素**。
3. 之后，使用 querySelector() 从 **第二个列表** 中选择 **第二个元素**。
4. 最后，使用 appendChild() 将 **第一个子元素** 添加到 **第二个列表** 中。