JavaScript HTML DOM 元素 (節(jié)點)新增,編輯,刪除操作實例分析
本文實例講述了JavaScript HTML DOM 元素 (節(jié)點)新增,編輯,刪除操作。分享給大家供大家參考,具體如下:
createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild
createElement
以下代碼是用于創(chuàng)建 <p> 元素:
var para = document.createElement("p");
createTextNode
為 <p> 元素添加文本節(jié)點:
var node = document.createTextNode("這是一個新的段落。");
appendChild(它用于添加新元素到尾部)
將文本節(jié)點添加到 <p> 元素中:
para.appendChild(node);
以上3個結(jié)合案例:
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); //創(chuàng)建p標簽 var node = document.createTextNode("這是一個新的段落。"); //添加文本節(jié)點 para.appendChild(node); //向p標簽添加文本節(jié)點(內(nèi)容) var element = document.getElementById("div1"); element.appendChild(para); //添加到已存在的元素中 </script>
運行結(jié)果:
insertBefore(新元素添加到開始位置)
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script>
運行結(jié)果:
removeChild
要移除一個元素,你需要知道該元素的父元素。
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>
運行結(jié)果:
replaceChild
使用 replaceChild() 方法來替換 HTML DOM 中的元素。
<div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另外一個段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("這是一個新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>
運行結(jié)果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
Javascript封裝id、class與元素選擇器方法示例
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法,文中給出了詳細的示例代碼,對大家的理解和學習具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03JavaScript自定義瀏覽器滾動條兼容IE、 火狐和chrome
本文主要分享了使用原生JavaScript實現(xiàn)自定義瀏覽器滾動條兼容IE、 火狐和chrome的思路與方法,具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01.net MVC+Bootstrap下使用localResizeIMG上傳圖片
這篇文章主要為大家詳細介紹了.net MVC和Bootstrap下使用 localResizeIMG上傳圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04基于JavaScript實現(xiàn)通用tab選項卡(通用性強)
選項卡在大量的網(wǎng)站都有應用,雖然形式各有不同,但是索要達成的目的都是一樣的,一般都是為了進行分類或者節(jié)省網(wǎng)頁空間只用,算是一件利器,下面就是一個選項卡的代碼實例,通用性很強,下面就和大家分享一下2016-01-01JS創(chuàng)建或填充任意長度數(shù)組的小技巧匯總
在JavaScript 中,我們往往會遇到需要使用某些默認值來填充數(shù)組的情況,那么都有哪些方式可以完成這樣的任務呢?這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建或填充任意長度數(shù)組的小技巧,需要的朋友可以參考下2021-10-10再次更新!MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類 Ver 1.6)
再次更新!MSClass (Class Of Marquee Scroll通用不間斷滾動JS封裝類 Ver 1.6)...2007-02-02