Js中关于用appendChild()插入节点的注意事项

众所周知，我们可以使用appendChild()给一个父节点插入子节点，这种方法插入的位置都是在父节点元素最后一个子元素之后插入的。 

但是，如果插入的子节点是DOM文档树里面已经存在的节点的话，这个节点会被移动到用appendChild()插入的位置，而不会被复制。

可以看以下样例：

<div id="father">
    <div id="son">123</div>
    <div>我是对比内容</div>
</div>
<script type="text/javascript">
    var father = document.getElementById("father");
    var son = document.getElementById('son');
    father.appendChild(son);
</script>

上面这段代码中如果把js代码注释，效果是"123"在"我是对比内容"上面。

如果不注释，"123"会在"我是对比内容"下面。

这就说明id为son的这个节点直接被拿到了father的最后一个子节点的后面，而它本身就不存在了，相似的操作方法还有insertBefore()。