1. 追加子元素
my$("dv").appendChild(obj);
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
my$("btn2").onclick = function () {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
4. 点击按钮删除div中所有的子级元素，先判断父级元素中有没有第一个子元素
my$("btn3").onclick = function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid pink; } </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>
原文：https://www.cnblogs.com/jane-panyiyun/p/11999424.html