題目一:
判斷checked復選框是否有被選中
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script>
window.onload = () => {let odiv=document.getElementById("ant");let ck=document.getElementById("ck");let obt=document.getElementById("bt");obt.onclick= () => {odiv.innerHTML=ck.checked;}
}
</script>
</head>
<body><div id="ant"></div><input type="checkbox" id="ck" checked/><input type="button" value="查看效果" id="bt"/>
</body>
</html>
運行結果:
題目二:
JavaScript 動態添加與刪除div元素
代碼和分析:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
#box{width:500px;
}
#box div{width:200px;height:20px;background:blue;margin-bottom:5px;
}
</style>
<script>
window.onload=function(){let oadd=document.getElementById("add");let odel=document.getElementById("del");let obox=document.getElementById("box");oadd.onclick=function(){//為添加按鈕注冊click事件處理函數。var odiv=document.createElement("div");//創建一個div元素對象。obox.appendChild(odiv);//將新創建的div添加到obox元素中。}odel.onclick=function(){var divs=obox.getElementsByTagName("div");//將新創建的div添加到obox元素中。if(divs.length>0){obox.removeChild(divs[0]);//如果obox含有添加的div元素,那么刪除其中的第一個。}}
}
</script>
</head>
<body><div id="box"></div><input type="button" id="add" value="添加元素"/><input type="button" id="del" value="刪除元素"/>
</body>
</html>
相關知識:
document.createElement(tagName)
此方法可以創建一個元素對象。tagName:一個字符串,用來規定創建元素對象的類型名稱。
removeChild可以刪除指定元素的子節點,如果刪除成功,則返回被刪除的子節點對象,否則返回null。