<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <input type="button" value="显示效果" id="btn"/> <input type="button" value="干掉第一个子元素" id="btn2"/> <input type="button" value="干掉所有子元素" id="btn3"/> <div id="dv"></div> <script src="common.js"></script> <script> var i=0; my$("btn").onclick=function () { i++; var obj= document.createElement("input"); obj.type="button"; obj.value="按钮"+i; //my$("dv").appendChild(obj);//追加子元素 //把新的子元素插入到第一个子元素的前面 my$("dv").insertBefore(obj,my$("dv").firstElementChild); //my$("dv").replaceChild();---自己玩 }; my$("btn2").onclick=function () { //移除父级元素中第一个子级元素 my$("dv").removeChild(my$("dv").firstElementChild); }; my$("btn3").onclick=function () { //点击按钮删除div中所有的子级元素 //判断父级元素中有没有第一个子元素 while(my$("dv").firstElementChild){ my$("dv").removeChild(my$("dv").firstElementChild); } }; </script> </body> </html>