js动态创建和删除div

最新推荐文章于 2024-05-10 22:28:54 发布

木号

最新推荐文章于 2024-05-10 22:28:54 发布

阅读量1.2w

点赞数

分类专栏： js/javascript 文章标签： js jsp javascript div

本文链接：https://blog.csdn.net/goodluck_mh/article/details/54632342

版权

js/javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

研究了一下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的动态增加和删除就已经完成了。

木号

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js动态创建和删除div

研究了一下js的动态生成div功能。特此一记：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.backgro
复制链接

扫一扫

专栏目录