html dom節點增刪改查
阿新 • • 發佈：2018-12-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { border: #b3d4fc 1px solid; padding: 2px; margin: 2px; width: 300px; height:200px; } #div1 { background: #ffff00; } #div2 { background: #ff0000; } #div3 { background: #0000cc; } #div4 { background: #b3d4fc; } </style> </head> <body> <scripttype="text/javascript" src="js/write.js"></script> <script type="text/javascript"> function creandadd() { //1.建立文字節點 var oTextNode=document.createTextNode("新建的文字節點"); //2.得到div1的物件 var oDiv1=document.getElementById("div1"); //3.將節點新增到div1 oDiv1.appendChild(oTextNode); } function creandadd1() { //1.新增按鈕,建立input節點 var oInputNode=document.createElement("input"); //2.設定input屬性 oInputNode.type="button"; oInputNode.value="新增的按鈕"; //3.得到div1物件 var oDiv1=document.getElementById("div1"); //4.新增到div1物件中 oDiv1.appendChild(oInputNode); } function creandadd2() { //通過另一種方式新增按鈕 //1.獲取div1物件 var oDiv1=document.getElementById("div1"); //2.通過innerhtml oDiv1.innerHTML+="<input type='button' value='新按鈕'/>"; } function deleteNode(){ //1.獲取節點 var oDiv2=document.getElementById("div2"); oDiv2.parentNode.removeChild(oDiv2); } function updateNode() { //1.獲取節點 var oDiv1=document.getElementById("div1"); var oDiv3=document.getElementById("div3"); //oDiv1.parentNode.replaceChild(oDiv3,oDiv1); //2.克隆節點並替換 var oCopyof=oDiv3.cloneNode(true); //true克隆其所有子節點 oDiv1.parentNode.replaceChild(oCopyof,oDiv1); } </script> <input type="button" value="建立並新增節點" onclick="creandadd2()"/> <input type="button" value="移除節點" onclick="deleteNode()"/> <input type="button" value="更改節點" onclick="updateNode()"/> <div id="div1"></div> <div id="div2">div演示區域</div> <div id="div3">節點的增刪改查</div> <div id="div4">just do it</div> </body> </html>