第JavaScriptHTMLDOM元素(節(jié)點(diǎn))新增，編輯，刪除操作實(shí)例分析

本文實(shí)例講述了JavaScriptHTMLDOM元素(節(jié)點(diǎn))新增，編輯，刪除操作。分享給大家供大家參考，具體如下：

createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild

createElement

以下代碼是用于創(chuàng)建p元素:

varpara=document.createElement(p

createTextNode

為p元素添加文本節(jié)點(diǎn)：

varnode=document.createTextNode(這是一個(gè)新的段落。

appendChild（它用于添加新元素到尾部）

將文本節(jié)點(diǎn)添加到p元素中：

para.appendChild(node);

以上3個(gè)結(jié)合案例：

divid=div1

pid=p1這是一個(gè)段落。/p

pid=p2這是另外一個(gè)段落。/p

/div

script

varpara=document.createElement(p//創(chuàng)建p標(biāo)簽

varnode=document.createTextNode(這是一個(gè)新的段落。//添加文本節(jié)點(diǎn)

para.appendChild(node);//向p標(biāo)簽添加文本節(jié)點(diǎn)（內(nèi)容）

varelement=document.getElementById(div1

element.appendChild(para);//添加到已存在的元素中

/script

運(yùn)行結(jié)果：

insertBefore（新元素添加到開始位置）

divid=div1

pid=p1這是一個(gè)段落。/p

pid=p2這是另外一個(gè)段落。/p

/div

script

varpara=document.createElement(p

varnode=document.createTextNode(這是一個(gè)新的段落。

para.appendChild(node);

varelement=document.getElementById(div1

varchild=document.getElementById(p1

element.insertBefore(para,child);

/script

運(yùn)行結(jié)果：

removeChild

要移除一個(gè)元素，你需要知道該元素的父元素。

divid=div1

pid=p1這是一個(gè)段落。/p

pid=p2這是另外一個(gè)段落。/p

/div

script

varparent=document.getElementById(div1

varchild=document.getElementById(p1

parent.removeChild(child);

/script

運(yùn)行結(jié)果：

replaceChild

使用replaceChild()方法來替換HTMLDOM中的元素。

divid=div1

pid=p1這是一個(gè)段落。/p

pid=p2這是另外一個(gè)段落。/p

/div

script

varpara=document.createElement(p

varnode=document.createTextNode(這是一個(gè)新的段落。

para.appendChild(node);

varparent=document.getElementById(div1

varchild=d