JavaScript元素的相關方法
阿新 • • 發佈：2018-07-28
所有 顯示 doc -- doctype insert border red btn
<!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>
JavaScript元素的相關方法