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

Question

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

在测试移动时，我遇到了一个问题。

http://jsfiddle.net/sJg7E/

如果你看一下上面的jsfiddle，我用过“appendChild”。为什么它将一个节点移动到一个新的div？我知道如果我想复制一个节点，我需要克隆一个节点。使用“appendChild”命令它看起来不合适。

这是预期的行为吗？

Answer 1

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

来自documentation of appendChild：

  

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

从同一页面：

  

您可以在附加节点之前使用cloneNode制作节点的副本   在新的父母。 （请注意，使用cloneNode创建的副本将会   不会自动保持同步。）

另请注意：

  

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

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

  

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