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