Node.appendChild

翻译正在进行中。

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

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

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

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

语法

element.appendChild(aChild)

参数

aChild
The node to append to the given parent node (commonly an element).

返回值

The returned value is the appended child (aChild), except when aChild is a DocumentFragment, in which case the empty DocumentFragment is returned.

附注

如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用document.importNode方法.

备注

由于 appendChild() 返回的是被附加的子元素,所以链式调用可能无法按照你的预期去执行:

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 No change from Document Object Model (DOM) Level 3 Core Specification.
Document Object Model (DOM) Level 3 Core Specification
Node.appendChild()
Obsolete No change from Document Object Model (DOM) Level 2 Core Specification.
Document Object Model (DOM) Level 2 Core Specification
Node.appendChild()
Obsolete No change from Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
Node.appendChild()
Obsolete Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
appendChildChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5Opera Full support 7Safari Full support 1.1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见