最近由於項目需求，要求能夠動態創建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.οnmοusedοwn=function(){down(this)};
this.οnmοusemοve=function(){move(this)};
this.οnmοuseup=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" οnclick="creatediv();" value="Create" />
</BODY>
</HTML>