JavaScript DOM基础操作实例

<html>
<head>          
</head>  
<body>           
<div id="test"></div> 

<div id="parent"><div id="child">A child</div></div> 

<p id="mynode">test</p> 

<div id="mynode2">          <span id="orispan">span</span>          </div> 

<script type="text/javascript"> 
//添加节点         
var newdiv=document.createElement("div");           
var newtext=document.createTextNode("A new div");                    
newdiv.appendChild(newtext);           
document.getElementById("test").appendChild(newdiv);    

//删除节点
var childnode=document.getElementById("child");
var removednode=document.getElementById("parent").removeChild(childnode);

//复制节点
var p=document.getElementById("mynode");           
var pclone = p.cloneNode(true);           
p.parentNode.appendChild(pclone);  

//替换节点
var orinode=document.getElementById("orispan");          
var newnode=document.createElement("p");           
var text=document.createTextNode("test ppp ");           
newnode.appendChild(text);           
document.getElementById("mynode2").replaceChild(newnode, orinode);           

</script>          
</body> 
</html> 

你可能感兴趣的:(JavaScript DOM基础操作实例)