用JavaScript來封裝文本元素節點__Java

原文連結: Wrapping Text Nodes and Elements with JavaScript 原文日期: 2014-09-04 翻譯日期: 2014-09-06 翻譯人員: 鐵錨
當你的應用需要依賴某個特定的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中了!