研究了一下js的动态生成div功能。特此一记:
<script type="text/javascript" >
var i=1;
function cDiv(){
var oDiv=document.createElement("div");
oDiv.style.border="1px solid black";
oDiv.style.width="500px";
oDiv.style.height="300px";
oDiv.style.backgroundColor="#E1E1E1";
oDiv.id='div'+i;
document.body.appendChild(oDiv);
var addinput=document.createElement("input");
addinput.type='button';
addinput.id='add'+i;
addinput.οnclick=cDiv;
addinput.value='create'+i;
document.body.appendChild(addinput);
var rminput=document.createElement("input");
rminput.type='button';
rminput.id=''+i; // 这里为了动态生成和动态删除 上面的元素。
rminput.οnclick=removeE; // 要直接加 函数名,就算有参数也是如此。
rminput.value='remove'+i;
document.body.appendChild(rminput);
i++;
}
function removeE(){
var id=this.id; // 得到执行函数元素的 id 值。(重要)
alert(id); // 建议在这里验证一下,也是一个好习惯。成功之后要删掉
document.body.removeChild(document.getElementById('div'+id)); // 拼接 id
document.body.removeChild(document.getElementById('add'+id));
document.body.removeChild(document.getElementById(''+id));
}
</script>
<body>
<div style="width:50%;height:200px;border:1px solid #F00;"></div>
<input type="button" id="btn" οnclick="cDiv()" value='create'/>
<input type="button" id="rmbtn" οnclick="removeE()" value='remove'/>
</body>
上面是完整的代码,在页面上展示的效果如下:
到此为止,div的动态增加 和删除就已经完成了。