標籤:idt val nbsp click order value div doctype color
<!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元素的相關方法