Javascript DOM 动态创建，删除DIV例子

小瓶盖的博客

于 2010-12-31 10:26:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： div javascript function class html button

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/jianping_shen/article/details/6108980

本文介绍了一种使用JavaScript动态创建并允许用户从HTML中删除DIV元素的方法。通过实例展示了如何利用DOM操作实现这一功能，包括创建带有关闭按钮的可拖动DIV。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近由于项目需求，要求能够动态创建DIV，而且能够让用户删除某个DIV，注意是从HTML中删除，不是通常的隐藏。

代码示例如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Dynamic Create DOM</TITLE>

<script>

idx=0;

function creatediv(){

var div_obj_1 = document.createElement("div");

class_div_1.call(div_obj_1);

body.appendChild(div_obj_1);

var div_obj_2 = document.createElement("div");

class_div_2.call(div_obj_2);

div_obj_1.appendChild(div_obj_2);

var a_obj_3 = document.createElement("a");

class_a_1.call(a_obj_3);

div_obj_2.appendChild(a_obj_3);

}

function class_div_1(){

idx++;

this.id=idx;

this.style.width="200";

this.style.height="200";

this.style.background="blue";

this.style.border="solid 10 red ";

this.style.position="absolute";

this.onmousedown=function(){down(this)};

this.onmousemove=function(){move(this)};

this.onmouseup=function(){up(this)};

}

function class_div_2(){

this.id="close_div";

this.style.position="absolute";

this.style.right="4px";

this.style.top="4px";

}

function class_a_1(){

this.href="javascript:close("+idx+")";

this.title="";

this.innerHTML='<img src="http://www.mizuan.net/image/closes.gif" />';

}

var flag=0;

function down(aa){

flag=1;

}

function move(aa){

if(flag==1){

aa.style.left=event.x-50;

aa.style.top=event.y-50;

}

}

function up(aa){

flag=0;

}

function close(str){

var obj = document.getElementById(str);

body.removeChild(obj);

}

</script>

</HEAD>

<BODY id="body" >

<input type ="button" onclick="creatediv();" value="Create" />

</BODY>

</HTML>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。