<title>Insert title here</title> <style type="text/css"> div{ table:#00ccff 1px solid; width: 200px; padding: 30px; margin: 10px; } #div_1{ background-color: #00ccdd; } #div_2{ background-color: #0cdd0c; } #div_3{ background-color: #cc00dd; } #div_4{ background-color: #cdddcd; } </style> <script type="text/javascript"> function crtAndAdd1(){ //1，创建节点，使用docuemnt中的createTextNode方法 var oTextNode=document.createTextNode("java 好好学习啊呵呵呵学习"); //获取div_1的节点 var ogetNode=document.getElementById("div_1"); //将文本节点添加到div_1中 ogetNode.appendChild(oTextNode); } //需求：在div_1中创建并添加一个按钮节点 function crtAndAdd2(){ //创建一个按钮节点 var oButNode=document.createElement("input"); oButNode.type="button"; oButNode.value="一个新按钮"; //获取div的节点 var ogetNode=document.getElementById("div_1"); //将按钮节点添加到div_1中 ogetNode.appendChild(oButNode); } //另一种添加方式 function crtAndAdd3(){ var oDivNode=document.getElementById("div_1"); // oDivNode.innerHTML="xxxx"; // oDivNode.innerHTML="<input type='button' value='按钮'/>"; oDivNode.innerHTML="<a href='http://www.baidu.com'>百度</a>"; } //需求讲div_2删除 function delNode(){ //获取节点 var oDivNode=document.getElementById("div_2"); // oDivNode.removeNode(true);较少用 //一般使用removerChild方法。删除子节点 //获取div_2的父节点，然后再用父节点的removerchild精div_2删除 oDivNode.parentNode.removeChild(oDivNode); } //需要：用div_3节点替换div_1节点 function updateNode(){ var oDivNode_1=document.getElementById("div_1"); var oDivNode_3=document.getElementById("div_3"); // oDivNode_1.replaceNode(oDivNode_3); oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1); } </script> </head> <body> <input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/> <input type="button" value="删除节点" onclick="delNode()"/> <input type="button" value="修改节点" onclick="updateNode()"/> <div id="div_1"> </div> <div id="div_2"> java:::好好学习Day！！！！！！ </div> <div id="div_3"> java:::好好学习Day！！！！！！ </div> <div id="div_4"> java:::好好学习Day！！！！！！ </div> </body> </html>