当前位置：文江博客知识库简体中文文档 Web API Node appendChild

Node.appendChild - Web API 接口参考编辑

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。若要保留已在文档中的节点，可以先使用 Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。

如果给定的子节点是 DocumentFragment，那么 DocumentFragment 的全部内容将转移到指定父节点的子节点列表中。

有更加新的 API 可供使用！
ParentNode.append() 方法支持多个参数，接受字符串作为参数，会将字符串转换为文本节点再附加。

语法

element.appendChild(aChild)

参数

aChild: 要追加给父节点（通常为一个元素）的节点。

let aBlock = document.createElement('block').appendChild( document.createElement('b') );

（上述代码）只会将 aBlock 设置为 <b></b> ，这可能不是你所想要的。

示例

// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

规范

规范	状态	备注
DOM Node.appendChild()	Living Standard	未对Document Object Model (DOM) Level 3 Core Specification进行更改
Document Object Model (DOM) Level 3 Core Specification Node.appendChild()	Obsolete	未对Document Object Model (DOM) Level 2 Core Specification进行更改
Document Object Model (DOM) Level 2 Core Specification Node.appendChild()	Obsolete	未对Document Object Model (DOM) Level 1 Specification进行更改
Document Object Model (DOM) Level 1 Specification Node.appendChild()	Obsolete	Initial definition.

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.