您的位置：首页 > Web前端 > JavaScript

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

2010-12-31 10:26 555 查看

最近由于项目需求，要求能够动态创建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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航