js操作DOM--添加、删除节点的简单实例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：853 次日期：2016-07-25 15:24:41

温馨提示：小编为您整理了“js操作DOM--添加、删除节点的简单实例”,方便广大网友查阅！

下面小编就为大家带来一篇js操作DOM--添加、删除节点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

js removeChild() 用法

<body>

<p id="p1">welcome to <b>javascript</b> world !</p>

<!--

function nodestatus(node)

{

var temp="";

if(node.nodeName!=null)

{

temp+="nodeName="+node.nodeName+"\n";

}

else temp+="nodeName=null \n";

if(node.nodeType!=null)

{

temp+="nodeType="+node.nodeType+"\n";

}

else temp+="nodeType=null \n";

if(node.nodeValue!=null)

{

temp+="nodeValue="+node.nodeValue+"\n";

}

else temp+="nodeValue=null \n";

return temp;

}

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

var msg="父节点 \n"+nodestatus(parent)+"\n";

//返回元素节点p的最后一个孩子

last=parent.lastChild;

msg+="删除之前：lastChild--"+nodestatus(last)+"\n";

//删除节点p的最后一个孩子,变为b

parent.removeChild(last);

last=parent.lastChild;

msg+="删除之后：lastChild--"+nodestatus(last)+"\n";

alert(msg);

-->

</script>

</body>

--------------------------------------------------------------

<html>

<head>

<title>js控制添加、删除节点</title>

</head>

var all;

function addParagraph() {

all = document.getElementById("paragraphs").childNodes;

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

var seq = all.length + 1;

//创建新属性

var newAttr = document.createAttribute("id");

newAttr.nodeValue = "p" + seq;

newElement.setAttribute(newAttr);

//创建文本内容

var txtNode = document.createTextNode("段落" + seq);

//添加节点

newElement.appendChild(txtNode);

document.getElementById("paragraphs").appendChild(newElement);

}

function delParagraph() {

all = document.getElementById("paragraphs").childNodes;

document.getElementById("paragraphs").removeChild(all[all.length -1]);

}

</script>

<style>

background-color : #e6e6e6 ;

}

</style>

<body>

</div>

</center>

</body>

</html>

以上这篇js操作DOM--添加、删除节点的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考

上一篇：JS添加删除DIV的简单实例

下一篇：简单封装js的dom查询实例代码

手机网站地址：js操作DOM--添加、删除节点的简单实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！