js操作html节点中怎么删除子节点,JavaScript DOM节点操作实例小结(新建,删除HTML元素)...

本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考，具体如下：

使用DOM可以新建HTML元素，也可以删除已有的HTML元素。

(一)新建元素：

//创建新的

元素

var newEle=document.createElement("p");

//创建文本节点

var node=document.createTextNode("这是使用Javascript创建的新段落。");

//将文本节点添加到新创建的

元素中

newEle.appendChild(node);

var div1_ele=document.getElementById("div1");

//将新创建的元素添加到已有的元素中

div1_ele.appendChild(newEle);

(二)删除HTML元素

//删除一个元素时，必须首先获取到它的父元素

function deleteEle(){

var parent = document.getElementById("div_02");

var child = document.getElementById("div_02_p2");

parent.removeChild(child);

}

//使用代码获取元素的父元素

function deleteEle3(){

var child = document.getElementById("div_02_p3");

child.parentNode.removeChild(child);

}

效果图：

示例代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript 节点

body {background-color:#e6e6e6}

(一)添加元素

这是一个段落

这是另一个段落

//创建新的

元素

var newEle=document.createElement("p");

//创建文本节点

var node=document.createTextNode("这是使用Javascript创建的新段落。");

//将文本节点添加到新创建的

元素中

newEle.appendChild(node);

var div1_ele=document.getElementById("div1");

//将新创建的元素添加到已有的元素中

div1_ele.appendChild(newEle);

(二)删除元素

这是一个段落

这是另一个段落

删除id为‘div_02_p2'的元素

这是第三个段落

删除id为‘div_02_p3'的元素(自动获取父元素)

//删除一个元素时，必须首先获取到它的父元素

function deleteEle(){

var parent = document.getElementById("div_02");

var child = document.getElementById("div_02_p2");

parent.removeChild(child);

}

//使用代码获取元素的父元素

function deleteEle3(){

var child = document.getElementById("div_02_p3");

child.parentNode.removeChild(child);

}

希望本文所述对大家JavaScript程序设计有所帮助。