JavaScript动态增加删除DIV.html

最新推荐文章于 2021-06-18 12:18:00 发布

萧萧可乐

最新推荐文章于 2021-06-18 12:18:00 发布

阅读量2.7k

点赞数

分类专栏： JS系列文章标签： javascript div function html 扩展

本文链接：https://blog.csdn.net/NIHAOX1/article/details/6919329

版权

JS系列专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
function add_div()
{
	var ad=document.getElementById('show');
	var adiv=document.createElement('div');
	adiv.style.background="#000000";
	adiv.style.width="100px";
	adiv.style.height="30px";
	adiv.id="kkk";
	ad.appendChild(adiv);
}
function del_div()
{
	var ad=document.getElementById('show');
	var adiv=document.getElementById('kkk');
	ad.removeChild(adiv);
}
</script>
<body bgcolor="#669900" id="show">
<button οnclick="add_div()">点击我吧</button><br />
<button οnclick="del_div()">点击我吧</button>
</body>

先把代码附上再说话。。。。

代码比较简单所有就没写备注

实现的原理在于 document.createElement(""); 和 appendChild();

创建新元素、和扩展子类。。。。大家仿写两次就了然。。。

删除是removeChild("")

其他就没什么好说的了。。。。。。。

个人感觉到目前为止都是比较简单的应用

想要学好的话基础还是在于css+div 以及各种HTML

大家都加油吧！！！！！

萧萧可乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript动态增加删除DIV.html

function add_div(){ var ad=document.getElementById('show'); var adiv=document.createElement('div'); adiv.style.background="#000000"; adiv.style.width="100px"; adiv.style.height="30px"; adiv.id=
复制链接

扫一扫

专栏目录