最近在研究学习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树中被删除了。
