<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
html,body{ margin: 0px; padding: 0px; text-align: center; font-size: 12px; background-color: White; color: Black; height: 100%; }
html,body div{ border: 0px; margin-left: auto; margin-right: auto; background-color: White; color: Black; }
html,body img{ border: 0px; }
html,body ul{ float: left; margin: 0px; padding: 0px; list-style: none; }
* a{ text-decoration: none; }
#main{ width:800px; overflow:auto; border:1px dotted #CC00FF;}
.title{ width:800px; height:30px; line-height:30px; background-color:#FFFFCC;}
.content{width:800px; height:30px; line-height:30px; background-color:#0066CC; border-top:1px dotted Red; border-bottom:1px dotted Red; margin-top:3px;}
.clear{ clear:both;}
.div1{ float:left; width:300px; height:30px; display:block; display:inline; background-color:#CCCCCC; text-align:left; }
.div2{float:left; width:500px; height:30px; display:block; display:inline; background-color: #FFCC99; text-align:left;}
</style>
<script type="text/javascript">
var div1;
var div2;
var div1Str="div1";
var div2Str="div2";
var content;
var contStr="content";
var count;
function createList(){
//alert("setup 1");
count=document.getElementsByTagName("div");
//alert("setup 2");
content=document.createElement("div");
//alert("setup 3");
content.id=contStr+count.length+1;
//alert("setup4"+content.id);
content.className="content";
//alert("setup 5");
document.body.appendChild(content);
//alert("setup 6");
div1=document.createElement("div");
//alert("setup 7");
div2=document.createElement("div");
//alert("setup 8"+count.length);
div1.id=div1Str+count.length+1;
//alert("setup 9");
div2.id=div2Str+count.length+1;
//alert("setup 10");
div1.className="div1";
//alert("setup 11");
div2.className="div2";
//alert("setup 12");
//alert(content.id);
//alert(div1.id);
div1.innerHTML='该层ID'+div1.id;
div2.innerHTML='该层ID'+div2.id;
document.getElementById(content.id).appendChild(div1);
document.getElementById(content.id).appendChild(div2);
}
</script>
<title>testing</title>
</head>
<body>
<div id="main">
<div class="title"><a href="#" onclick="createList()">创建新的层</a> </div>
<div class="clear"></div>
</div>
</body>
</html>
评论