节点：appendChild() 方法

appendChild() 是 Node 接口的方法，它将节点添加到指定父节点的子节点列表的末尾。

注意： 如果给定的子节点是对文档中现有节点的引用，appendChild() 会将它从当前位置移动到新位置。

如果给定的子节点是 DocumentFragment，则 DocumentFragment 的所有内容都将移动到指定父节点的子节点列表中。

appendChild() 返回新添加的节点，或者如果子节点是 DocumentFragment，则返回清空的片段。

注意： 与此方法不同，Element.append() 方法支持多个参数和添加字符串。如果您的节点是元素，您可以选择使用它。

语法

js
appendChild(aChild)

参数

aChild

要添加到给定父节点（通常是元素）的节点。

返回值

一个 Node，它是添加的子节点 (aChild)，除非 aChild 是 DocumentFragment，在这种情况下，返回清空的 DocumentFragment。

异常

HierarchyRequestError DOMException

当违反 DOM 树的约束时抛出，即如果发生以下情况之一

描述

如果给定的子节点是对文档中现有节点的引用，appendChild() 会将它从当前位置移动到新位置 - 在将它添加到其他节点之前，不需要从其父节点中删除该节点。这意味着节点不能同时出现在文档中的两个位置。Node.cloneNode() 方法可以用来在将节点添加到新的父节点下之前复制该节点。使用 cloneNode 生成的副本不会自动保持同步。

appendChild() 返回新添加的节点，而不是父节点。这意味着您可以在新节点创建后立即添加它，而不会丢失对它的引用。

js
const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph later

另一方面，您不能在 流式 API 方式（如 JQuery）中使用 appendChild()。

js
// This doesn't append three paragraphs:
// the three elements will be nested instead of siblings
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

示例

将段落添加到主体

js
// Create a new paragraph element, and append it to the end of the document body
const p = document.createElement("p");
document.body.appendChild(p);

创建嵌套的 DOM 结构

在此示例中，我们尝试使用尽可能少的临时变量创建嵌套的 DOM 结构。

js
const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);

它生成以下 DOM 树

html
<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>

规范

规范
DOM 标准
# dom-node-appendchild

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅