js如何生成Div?(比较急)

在页面上生成两个方框队列,第一个队列里有10个方框，每个方框的颜色不一样，页面上有个pop按钮,每按一次,从第一个队列删除一个方框，将其添加到第二个队列(最多显示10个方框)中，同时有一个Push按钮，每按一次，自动生成一个方框，并将添加到第一个队列中去。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

var div = document.createElement("div");
div.innerTHML = "text";
document.body.appendChild(div);
<!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" />
<title>文档</title>
</head>
<style type="text/css">
#panel1,#panel2 {
width:500px;
height:500px;
float:left;
border:1px solid #000;
}
.t {
height:30px;
width:30px;
margin:2px;
float:left;
}
#div1 {
background-color:red;
}
#div2 {
background-color:orange;
}
#div3 {
background-color:yellow;
}
#div4 {
background-color:blue;
}
#div5 {
background-color:green;
}
#div6 {
background-color:gary;
}
#div7 {
background-color:black;
}
#div8 {
background-color:#eee;
}
#div9 {
background-color:#ccc;
}
#div10 {
background-color:#ddd;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("pop").onclick = function() {
var cols = document.getElementById("panel1").getElementsByTagName("div");
if(!!cols.length) {
var tmp = cols[0];

tmp = document.getElementById("panel1").removeChild(tmp);
document.getElementById("panel2").appendChild(tmp);
}
};

document.getElementById("push").onclick = function() {
var cols = document.getElementById("panel2").getElementsByTagName("div");
if(!!cols.length) {
var tmp = cols[0];

tmp = document.getElementById("panel2").removeChild(tmp);
document.getElementById("panel1").appendChild(tmp);
}
};
};</script>
<body>
<input type="button" id="pop" value="pop" />
<input type="button" id="push" value="push" />
<div id="panel1">
<div class="t" id="div1"></div>
<div class="t" id="div2"></div>
<div class="t" id="div3"></div>
<div class="t" id="div4"></div>
<div class="t" id="div5"></div>
<div class="t" id="div6"></div>
<div class="t" id="div7"></div>
<div class="t" id="div8"></div>
<div class="t" id="div9"></div>
<div class="t" id="div10"></div>
</div>
<div id="panel2"></div>
</body>
</html>
感谢楼上高手，请问if(!!cols.length) 这是什么意思呢？  怎么有两个感叹号？
cols.length是个数字如果是0的话就是false 其他则是true
但是为了防止不做转换加上!!就强制转换了。
<div id="l1">
<div style="width:100px;height:30px;background:#111;"></div>
<div style="width:100px;height:30px;background:#222;"></div>
<div style="width:100px;height:30px;background:#333;"></div>
<div style="width:100px;height:30px;background:#444;"></div>
<div style="width:100px;height:30px;background:#555;"></div>
<div style="width:100px;height:30px;background:#666;"></div>
<div style="width:100px;height:30px;background:#777;"></div>
<div style="width:100px;height:30px;background:#888;"></div>
<div style="width:100px;height:30px;background:#999;"></div>
<div style="width:100px;height:30px;background:#eee;"></div>
</div>
<hr >
<div id="l2"></div>
<input type="button" value="pop" onclick="pop();" />
<input type="button" value="push" onclick="push();" />
<script type="text/javascript">
  function pop(){
var clds = document.getElementById("l1").getElementsByTagName("div");
if(clds[clds.length-1].nodeType != 1){
              document.getElementById("l2").appendChild(clds[clds.length-2]);
         }else {
document.getElementById("l2").appendChild(clds[clds.length-1]);
            }
}
function push(){
var clds = document.getElementById("l2").getElementsByTagName("div");
if(clds[clds.length-1].nodeType != 1){
              document.getElementById("l1").appendChild(clds[clds.length-2]);
         }else {
document.getElementById("l1").appendChild(clds[clds.length-1]);
            }
}
</script>
if(!!cols.length)和if(cols.length!=0)是一样的吗？
<div id="l1">
<div style="width:100px;height:30px;background:#111;"></div>
<div style="width:100px;height:30px;background:#222;"></div>
<div style="width:100px;height:30px;background:#333;"></div>
<div style="width:100px;height:30px;background:#444;"></div>
<div style="width:100px;height:30px;background:#555;"></div>
<div style="width:100px;height:30px;background:#666;"></div>
<div style="width:100px;height:30px;background:#777;"></div>
<div style="width:100px;height:30px;background:#888;"></div>
<div style="width:100px;height:30px;background:#999;"></div>
<div style="width:100px;height:30px;background:#eee;"></div>
</div>
<hr >
<div id="l2"></div>
<input type="button" value="pop" onclick="pop();" />
<input type="button" value="push" onclick="push();" />
<script type="text/javascript">
  function pop(){
var clds = document.getElementById("l1").getElementsByTagName("div");
if(!clds.length) return ;
if(clds[clds.length-1].nodeType != 1){
              document.getElementById("l2").appendChild(clds[clds.length-2]);
         }else {
document.getElementById("l2").appendChild(clds[clds.length-1]);
            }
}
function push(){
var clds = document.getElementById("l2").getElementsByTagName("div");
if(!clds.length) return ;
if(clds[clds.length-1].nodeType != 1){
              document.getElementById("l1").appendChild(clds[clds.length-2]);
         }else {
document.getElementById("l1").appendChild(clds[clds.length-1]);
            }
}
</script>
应该说和这个一样？cols.length>0
<div id="l1">
<div style="width:100px;height:30px;background:#111;"></div>
<div style="width:100px;height:30px;background:#222;"></div>
<div style="width:100px;height:30px;background:#333;"></div>
<div style="width:100px;height:30px;background:#444;"></div>
<div style="width:100px;height:30px;background:#555;"></div>
<div style="width:100px;height:30px;background:#666;"></div>
<div style="width:100px;height:30px;background:#777;"></div>
<div style="width:100px;height:30px;background:#888;"></div>
<div style="width:100px;height:30px;background:#999;"></div>
<div style="width:100px;height:30px;background:#eee;"></div>
</div>
<hr >
<div id="l2"></div>
<input type="button" value="pop" onclick="pop();" />
<input type="button" value="push" onclick="push();" />
<script type="text/javascript">
  function pop(){
    var clds = document.getElementById("l1").getElementsByTagName("div");
    if(!clds.length) return ;
    if(clds[clds.length-1].nodeType != 1){
              document.getElementById("l2").appendChild(clds[clds.length-2]);
         }else {
        document.getElementById("l2").appendChild(clds[clds.length-1]);
            }
}
function push(){
    var div = document.createElement("div");
    div.style.cssText = "width:100px;height:30px;background:#eee;";
    document.getElementById("l1").appendChild(div);
}
</script>
<!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" />
<title>文档</title>
</head>
<style type="text/css">
#panel1,#panel2 {
width:500px;
height:500px;
float:left;
border:1px solid #000;
}
.t {
height:30px;
width:30px;
margin:2px;
float:left;
border:1px #000 solid;
}
#div1 {
background-color:red;
}
#div2 {
background-color:orange;
}
#div3 {
background-color:yellow;
}
#div4 {
background-color:blue;
}
#div5 {
background-color:green;
}
#div6 {
background-color:gary;
}
#div7 {
background-color:black;
}
#div8 {
background-color:#eee;
}
#div9 {
background-color:#ccc;
}
#div10 {
background-color:#ddd;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("pop").onclick = function() {
var cols = document.getElementById("panel1").getElementsByTagName("div");
var cols2 = document.getElementById("panel2").getElementsByTagName("div");
if(cols2.length>=10)
return false;
if(!!cols.length) {
var tmp = cols[0];

tmp = document.getElementById("panel1").removeChild(tmp);
document.getElementById("panel2").appendChild(tmp);
}
};

document.getElementById("push").onclick = function() {
var cols = document.getElementById("panel1").getElementsByTagName("div");
var cols2 = document.getElementById("panel2").getElementsByTagName("div");
var tmp = !!cols.length ? cols[0].cloneNode(false) : cols2[0].cloneNode(false);
document.getElementById("panel1").appendChild(tmp);
};
};</script>
<body>
<input type="button" id="pop" value="pop" />
<input type="button" id="push" value="push" />
<div id="panel1">
<div class="t" id="div1"></div>
<div class="t" id="div2"></div>
<div class="t" id="div3"></div>
<div class="t" id="div4"></div>
<div class="t" id="div5"></div>
<div class="t" id="div6"></div>
<div class="t" id="div7"></div>
<div class="t" id="div8"></div>
<div class="t" id="div9"></div>
<div class="t" id="div10"></div>
</div>
<div id="panel2"></div>
</body>
</html>
强烈建议楼主将div换成span，在w3c中div只是用来布局的，而span是用来显示的。
最好将布局换成一下这样：
<div id="panelTop">
<span id="tp_opt1"></span>
<span id="tp_opt2"></span>
<span id="tp_opt2"></span>
<span id="tp_opt4"></span>
</div>
<div id="panelBottom">
<span id="bt_opt1"></span>
<span id="bt_opt2"></span>
<span id="bt_opt3"></span>
<span id="bt_opt4"></span>
</div>
这样在将来你会发现结构很明了，很好维护！
另外，补充一下石佛哥的一个问题：
!!cols.length有点问题，这是将col.length强制转换为bool型，当且仅当cols.length为0/null/undefined时s输出false，但是在cols.length小于0时也会输出true，这样说来会有异常发生！所以建议将!!cols.length的用法改为：cols.length&&cols.length<=10&&cols.length>0
document.getElementById("push").onclick = function() {
            var cols = document.getElementById("panel1").getElementsByTagName("div");
            var cols2 = document.getElementById("panel2").getElementsByTagName("div");
            var tmp = (cols.length&&cols.length<=10&&cols.length>0) ? cols[0].cloneNode(false) : cols2[0].cloneNode(false);
            document.getElementById("panel1").appendChild(tmp);
  };
可能你太强悍了，但是现实情况是，length不可能也不会出现负数的。因实际情况而异是有好处的。这样减少判断