<html> <head> <title></title> <style type="text/css"> div{ border: 1px solid #ff0000; height:100px; width:200px; margin:10px 10px; padding:10px 10px; } #div_1{ background-color:#ff0000; } #div_2{ background-color:#ffff00; } #div_3{ background-color:#00ff00; } #div_4{ background-color:#ff00ff; } </style> <script> /* 添加內容到div中 */ function adddemo(){ //獲取第一個div節點對象 var divNode1 = document.getElementById("div_1"); //alert(divNode1.nodeName); //創建一個文本節點 var textNode = document.createTextNode("div區域"); //alert(textNode.nodeName); //將文本節點添加到div中 divNode1.appendChild(textNode); //添加一個超鏈接 //創建一個超鏈接對象 var aNode = document.createElement("a"); //鏈接地址 aNode.href = "http://www.baidu.com"; //鏈接內容 aNode.innerText = "百度"; //把節點對象添加到div中 divNode1.appendChild(aNode); } /* 刪除div節點中內容 */ function deleteNode(){ //獲取當前節點對象 var divNode2 = document.getElementById("div_2"); //獲取文本節點 var textNode = divNode2.childNodes[0]; //刪除文本節點 divNode2.removeChild(textNode); } /* 刪除節點 */ function deleteNode2() { /* //第一種 //獲取div節點對象 var divNode2 = document.getElementById("div_2"); //獲取父節點 var parentNode = divNode2.parentNode; //alert(parentNode.nodeName); parentNode.removeChild(divNode2); */ //第二種 //節點自己刪除自己 //獲取節點對象 var divNode2 = document.getElementById("div_2"); //刪除節點,參數為true時，連同子節點也一起上刪除，此方法在IE中有效 divNode2.removeNode(true); } /* 替換節點，用來替換的div對象不存在了，用div1替換你div3 */ function update(){ //獲取第一個div節點對象 var divNode1 = document.getElementById("div_1"); //獲取另一個div節點對象 var divNode3 = document.getElementById("div_3"); //替換節點,IE有效 divNode3.replaceNode(divNode1); } /* 克隆節點，原節點存在，用div3來替換div4 */ function clone(){ //獲取div3的節點對象 var div3Node = document.getElementById("div_3"); //獲取div4節點對象 var div4Node = document.getElementById("div_4"); //復制div3,參數true復制時連同子節點也一起復制 var div3Node2 = div3Node.cloneNode(true); //替換 div4Node.replaceNode(div3Node2); } </script> </head> <body> <div id = "div_1"> </div> <div id = "div_2"> div區域2 </div> <div id = "div_3"> div區域3 </div> <div id = "div_4"> div區域4 </div> <hr/> <input type="button" value="添加內容" onclick="adddemo()" /> <input type="button" value="刪除節點內容" onclick="deleteNode()" /> <input type="button" value="刪除節點" onclick="deleteNode2()" /> <input type="button" value="替換節點" onclick="update()" /> <input type="button" value="克隆節點" onclick="clone()" /> </body> </html>