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

2019-11-20 09:32:05

字体：大中小

来源：转载

供稿：网友

js removeChild() 用法<body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- 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><script type="text/javascript">  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>  p{    background-color : #e6e6e6 ;  }</style><body><center>  <input type="button" value="添加节点" onclick="addParagraph();"/>  <input type="button" value="删除节点" onclick="delParagraph();"/>  <div id="paragraphs">    <p id="p1">段落1</p>    <p id="p2">段落2</p>  </div></center></body></html>

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

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

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