當你的應用需要依賴某個特定的JavaScript類別庫時,你無意中總是會試圖解決某些類別庫自身的問題,而不是語言的問題。就例如當我試著將文字(可能也包含HTML元素)用一個DIV元素包起來時。假設有以下HTML:
This is some text and <a href="">a link</a>
這時候如果想把它轉換成下面這樣:
<div>This is some text and <a href="">a link</a><div>
最簡單暴力的方法是,你可以在父元素上通過 .innerHTML 屬性來執行更新,但問題是這樣一來所有綁定的事件監聽都會失效,因為使用 innerHTML 時會重新創建一個HTML元素。這真是個大玻璃杯！所以這時候只能利用JavaScript來實現 —— 尺有所短、寸有所長。下面是實作程式碼:
var newWrapper = document.createElement('div');
while(existingParent.firstChild) {
// 移动DOM元素,不会创建新元素
newWrapper.appendChild(existingParent.firstChild);
}這裡不能使用for迴圈,因為 childNodes 是一個動態節點組成的集合,只要移動節點就會影響到他的index索引值。我們用while循環一直偵測父元素的 firstChild ,如果其傳回一個代表 false 的值, 那麼你就知道所有的節點都已經移到新的parent中了!
