【JavaScript】appendChild一个的注意点之会删除原dom树节点

最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。

---

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

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

这下好了，就是appendChild在其中发挥了作用：使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原dom树的节点。

---

下面看个例子：

<div id='container'>
    title
    <p>content</p>
</div>

（1）此时不对container作任何dom操作，同时打印一下container的childNodes（此时NodeList(0)为text-title，页面将看到的是：

（2）然后写段js代码，将container的firstchild使用appendchild方法添加到DocumentFragment

 <script>
    var container = document.getElementById('container')
    var frag = document.createDocumentFragment();
    frag.appendChild(container.firstChild)
  </script>

（3）最后打印一下container的childNodes同时看看页面渲染结果：

（4）最后呈现出来的结果就是被我用appendchild方法操作的节点（类型：text，内容：“title”）在原dom树中被删除了。