用JavaScript實現(xiàn)用一個DIV來包裝文本元素節(jié)點
當你的應用需要依賴某個特定的JavaScript類庫時,你無意中總會試圖解決某些類庫自身的問題,而不是語言的問題。就比如當我試圖將文本(可能也包含HTML元素)用一個DIV元素包起來時。假設有以下HTML:
This is some text and <a href="">a link</a>
這時候如果想把它轉(zhuǎn)換為下面這樣:
<div>This is some text and <a href="">a link</a><div>
最簡單暴力的方法是,你可以在父元素上通過 .innerHTML 屬性來執(zhí)行更新,但問題是這樣一來所有綁定的事件監(jiān)聽都會失效,因為使用 innerHTML 時會重新創(chuàng)建一個HTML元素。這真是個大玻璃杯!所以這時候只能利用JavaScript來實現(xiàn) —— 尺有所短、寸有所長。下面是實現(xiàn)代碼:
var newWrapper = document.createElement('div'); while(existingParent.firstChild) { // 移動DOM元素,不會創(chuàng)建新元素 newWrapper.appendChild(existingParent.firstChild); }
這里不能使用for循環(huán),因為 childNodes 是一個動態(tài)節(jié)點組成的集合,只要移動節(jié)點就會影響到他的index索引值。我們用while循環(huán)一直檢測父元素的 firstChild ,如果其返回一個代表 false 的值, 那么你就知道所有的節(jié)點都已經(jīng)移到新的parent中了!
- javascript刪除元素節(jié)點removeChild()用法實例
- javascript刪除一個html元素節(jié)點的方法
- JS 使用for循環(huán)遍歷子節(jié)點查找元素
- 一個獲取第n個元素節(jié)點的js函數(shù)
- js遍歷子節(jié)點子元素附屬性及方法
- JS獲取節(jié)點的兄弟,父級,子級元素的方法
- js創(chuàng)建元素(節(jié)點)示例
- javascript基礎之查找元素的詳細介紹(訪問節(jié)點)
- Js 獲取HTML DOM節(jié)點元素的方法小結(jié)
- JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法
相關(guān)文章
Javascript中獲取出錯代碼所在文件及行數(shù)的代碼
之前在做一個Javascript的日志控制臺功能模塊,希望能夠在Javascript代碼出錯時捕獲此錯誤,并將出錯的文件及相應的行數(shù)打印到控制臺并匯報給服務器。2010-09-09基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊列動畫實現(xiàn)示例解析
這篇文章主要介紹了基于JavaScript的數(shù)據(jù)結(jié)構(gòu)隊列動畫實現(xiàn)示例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08JavaScript+Canvas實現(xiàn)繪制音頻可視化波形圖
這篇文章主要為大家詳細介紹了如何利用JavaScript和Canvas實現(xiàn)繪制音頻可視化波形圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式
這篇文章主要介紹了javascript?實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參一下2022-07-07