众所周知,我们可以使用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()。