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);