JS添加或刪除HTML dom元素的方法實例分析

本文實例講述了JS代碼添加或刪除HTML dom元素的方法。分享給你們供你們參考，具體以下：

建立新的 HTML 元素

如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素。

?

1 2 3 4

< div id = "div1" > < p id = "p1" >這是一個段落。</ p > < p id = "p2" >這是另外一個段落。</ p > </ div >

?

1 2 3 4 5 6 7

<script> var para=document.createElement( "p" ); var node=document.createTextNode( "這是一個新段落。" ); para.appendChild(node); var element=document.getElementById( "div1" ); element.appendChild(para); </script>

這段代碼建立新的<p> 元素：

?

1	var para=document.createElement( "p" );

如需向 <p> 元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：

?

1	var node=document.createTextNode( "這是一個新段落。" );

而後您必須向 <p> 元素追加這個文本節點：

?

1	para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。

這段代碼找到一個已有的元素：

?

1	var element=document.getElementById( "div1" );

如下代碼在已存在的元素後添加新元素：

?

1	element.appendChild(para);

刪除已有的 HTML代碼 元素

?

1 2 3 4

< div id = "div1" > < p id = "p1" >這是一個段落。</ p > < p id = "p2" >這是另外一個段落。</ p > </ div >

?

1 2 3 4 5

<script> var parent=document.getElementById( "div1" ); var child=document.getElementById( "p1" ); parent.removeChild(child); </script>

若是可以在不引用父元素的狀況下刪除某個元素，就太好了。
不過很遺憾。DOM 須要清楚您須要刪除的元素，以及它的父元素。

這是經常使用的解決方案：找到您但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素：

?

1 2	var child=document.getElementById( "p1" ); child.parentNode.removeChild(child);