js拾遺：appendChild 添加移動節點

標籤：c   style   class   blog   code   a   

原文:js拾遺：appendChild 添加移動節點

寫js一年多了，一直以為自己很牛逼，開始寫各種博文分享，昨天寫了一篇《淺談 IE下innerHTML導致的問題》在看了下面的評論，我才發現自己是多麼無知。
於是我回頭翻閱了下 MDN，Node.appendChild 裡面一開始就明確說了，“如果該節點已經存在，則從當前父節點中刪除，然後添加到新的父節點。”
簡單來說就是移動當前節點的意思，所以昨天的代碼裡去掉 obox.innerHTML = ""; 即可全相容。

來看個常見的例子：

var p = document.createElement("p");document.body.appendChild(p);

這個是最常見的用法，建立 p 節點，添加到 body 的末尾。

var p1 = document.getElementById("p1");document.body.appendChild(p1);

那這個代碼的意思就是選擇ID為 p1 的節點，移動到 body 的末尾。

簡單說，就是把節點放到指定父節點的末尾，不論是建立的還是選取到的。

不過話說回來，innerHTML 在IE下確實存在bug，可是我沒找到相關的文章，希望以後會有機會解開這個問題。

通過這個問題讓我認識到自己是多麼無知，確實該停下腳步，回頭拾遺了。