dom增删改查
<!doctype html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="utf-8"> <title></title> <style> .hover{ width:100px; height:100px; background:red; float:left; } .hovers{ width:100px; height:100px; background:yellow; float:left; } </style> </head> <body> <input type="button" value="增"> <!-- 增 --> <input type="button" value="删"> <!-- 删 --> <input type="button" value="改"> <!-- 查 --> <div id="main"></div> <!-- 元素库 --> </body> </html> <script> var ints = document.getElementsByTagName('input'); for(var i = 0 ; i<ints.length ; i++){ ints[i].index = i ; ints[i].onclick=function(){ if(this.index==0){ var odiv = document.createElement('div'); odiv.setAttribute('class','hover') document.getElementById('main').appendChild(odiv); } else if(this.index==1){ var odiv = document.getElementById('main'); var odivs = odiv.getElementsByTagName('div'); if(odivs.length==0){ alert('没有了'); } else{ document.getElementById('main').removeChild(odivs[odivs.length-1]); } } else if(this.index==2){ var odiv = document.getElementById('main'); var odivs = odiv.getElementsByTagName('div'); for(var i = 0 ;i<odivs.length;i++){ odivs[i].setAttribute('class','hovers') } } } } </script>