最近在研究學(xué)習(xí)vue原理，其中使用createDocumentFragment()方法，是用來創(chuàng)建一個虛擬的節(jié)點(diǎn)對象，那問題來了，創(chuàng)建了虛擬dom樹，且最后只渲染了虛擬dom樹里面的節(jié)點(diǎn)，那原dom樹的節(jié)點(diǎn)去哪里了，查閱了MDN等相關(guān)資料，發(fā)現(xiàn)是appendChild在搞搞震。

---

首先看一下MDN上對appendChild的定義：
Node.appendChild() 方法將一個節(jié)點(diǎn)附加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾處。如果將被插入的節(jié)點(diǎn)已經(jīng)存在于當(dāng)前文檔的文檔樹中，那么 appendChild() 只會將它從原先的位置移動到新的位置（不需要事先移除要移動的節(jié)點(diǎn)）。

這意味著，一個節(jié)點(diǎn)不可能同時出現(xiàn)在文檔的不同位置。所以，如果某個節(jié)點(diǎn)已經(jīng)擁有父節(jié)點(diǎn)，在被傳遞給此方法后，它首先會被移除，再被插入到新的位置。若要保留已在文檔中的節(jié)點(diǎn)，可以先使用 Node.cloneNode() 方法來為它創(chuàng)建一個副本，再將副本附加到目標(biāo)父節(jié)點(diǎn)下。請注意，用 cloneNode 制作的副本不會自動保持同步。

這下好了，就是appendChild在其中發(fā)揮了作用：使用appendChid方法將原dom樹中的節(jié)點(diǎn)添加到DocumentFragment中時，會刪除原dom樹的節(jié)點(diǎn)。

---

下面看個例子：

<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同時看看頁面渲染結(jié)果：

（4）最后呈現(xiàn)出來的結(jié)果就是被我用appendchild方法操作的節(jié)點(diǎn)（類型：text，內(nèi)容：“title”）在原dom樹中被刪除了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。