From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/node/appendchild/index.html | 109 ++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/zh-cn/web/api/node/appendchild/index.html (limited to 'files/zh-cn/web/api/node/appendchild') diff --git a/files/zh-cn/web/api/node/appendchild/index.html b/files/zh-cn/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..b20068ef62 --- /dev/null +++ b/files/zh-cn/web/api/node/appendchild/index.html @@ -0,0 +1,109 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - 参考 + - 方法 + - 节点 +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

语法

+ +
element.appendChild(aChild)
+ +

参数

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

返回值

+ +

返回追加后的子节点 （aChild），除非 aChild 是一个文档片段（{{domxref("DocumentFragment")}}），这种情况下将返回空文档片段（{{domxref("DocumentFragment")}}）。

+ +

附注

+ +

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

+ +

这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用{{domxref("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);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}} 未对{{SpecName("DOM3 Core")}}进行更改
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}} 未对{{SpecName("DOM2 Core")}}进行更改
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}} 未对{{SpecName("DOM1")}}进行更改
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Node.appendChild")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf