javascript - 为什么“appendChild”会移动一个节点？

Question

我正在玩原生 javascript。我基本上是在练习基本的节点操作，例如添加、删除、移动、复制和创建。

在测试移动时，我有一个问题。

http://jsfiddle.net/sJg7E/

如果您查看上面的 jsfiddle，我使用了“appendChild”。它如何将节点移动到新的div？我知道如果我想复制一个节点，我需要克隆一个节点。“appendChild”命令看起来/听起来不正确。

这是预期的行为吗？

Answer 1

一个节点只能有一个父节点。因此，如果您将其附加到另一个节点，它会移动它。

从appendChild 的文档中：

将一个节点添加到指定父节点的子节点列表的末尾。如果节点已经存在，则将其从当前父节点中删除，然后添加到新的父节点。

从同一页面：

您可以使用 cloneNode 来制作节点的副本，然后再将其附加到新父节点下。（请注意，使用 cloneNode 制作的副本不会自动保持同步。）

另请注意：

此方法不允许在不同文档之间移动节点。如果你想从不同的文档追加节点（例如显示来自 AJAX 请求的结果），你必须首先使用 importNode。

您还可以阅读appendChild的 w3c 规范：

将节点 newChild 添加到该节点的子节点列表的末尾。如果 newChild 已经在树中，则首先将其移除。