1. 追加子元素 my$("dv").appendChild(obj); 2. 把新的子元素插入到第一個子元素的前面 my$("dv").insertBefore(obj, my$("dv").firstElementChild); 3. 移除父級元素中第一個子級元素 my$("btn2").onc ...
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>
