最近在研究學習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樹中被刪除了。

總結

以上是生活随笔為你收集整理的【JavaScript】appendChild一个的注意点之会删除原dom树节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。