前端JavaScript-动态添加和删除div元素
2019-05-16 本文已影响4人
560b7bb7b879
实际应用中可能需要动态添加或者删除div元素，下面通过代码实例介绍一下如何实现此功能。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习交流扣qun：731 771 211 志同道合者进 </title>
<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(){
var odiv=document.createElement("div");
obox.appendChild(odiv);
}
odel.onclick=function(){
var divs=obox.getElementsByTagName("div");
if(divs.length>0){
obox.removeChild(divs[0]);
}
}
}
</script>
</head>
<body>
<div id="box"></div>
<input type="button" id="add" value="添加元素"/>
<input type="button" id="del" value="删除元素"/>
</body>
</html>
