1. 追加子元素
my$("dv").appendChild(obj);
2. 把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
3. 移除父级元素中第一个子级元素
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>
如果只创建一个元素，如何操作？
有则删除----->先判断有没有,有就删除,然后再创建
有则删除,无则创建 <!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" /> <div id="dv"></div> <script src="common.js"></script> <script> //有则删除,无则创建 //先判断有没有,有就删除,然后再创建 my$("btn").onclick = function () { //判断,div中有没有这个按钮,有就删除 //判断这个按钮的子元素是否存在 if (my$("btn2")) {//如果为true就有 my$("dv").removeChild(my$("btn2")); } var obj = document.createElement("input"); obj.type = "button"; obj.value = "按钮"; obj.id = "btn2"; my$("dv").appendChild(obj); }; </script> </body> </html>
反之：无则创建，如下：
<!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" /> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //判断这个按钮的子元素是否存在 if (!my$("btn2")) {//如果为true就有 var obj = document.createElement("input"); obj.type = "button"; obj.value = "按钮"; obj.id = "btn2"; my$("dv").appendChild(obj); } }; </script> </body> </html>