javascript - 如何使用 javascript 使用循环动态并排附加 Divs？

Question

您能否帮助如何使用 javascript 使用循环并排附加 Div，这里是两列和 6 行。我尝试了以下代码，

for(var i=0;i<2;i++) {
    for(var j=0;j<5;j++) {
        document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />')+"\n";    
    }
}

Answer 1

html:

​&lt;div id="table"></div>​

js：

var newdiv;
for(var i=0;i<2;i++) {
    for(var j=0;j<6;j++) {
        newdiv=document.createElement("div");
        newdiv.style.width = '80px';
        newdiv.style.height = '80px';
        newdiv.style.border = '1px solid red';
        newdiv.style.float = 'left';
        document.getElementById('table').appendChild(newdiv);    
    }
    newdiv=document.createElement("div");
    newdiv.style.clear = 'both';
    document.getElementById('table').appendChild(newdiv);
}​

Answer 2

我想你"\n"在错误的地方添加了。

 document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />'+"\n");

测试代码： -

function CreateDiv()
{
for(var i=0;i<2;i++) {
        for(var j=0;j<5;j++) {
            document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" >Hi</div>');  
        }
    }
}

Answer 3

试试这个

http://jsfiddle.net/DsqMj/4/

HTML

<div id="table"></div>

CSS

#table .box {
width: 100px;
height: 30px;
background-color: #ccc;
}
#table .box:nth-child(even) {
background-color: #eee;
}
#table .col {
width:100px;
border: 1px solid #aaa;
float: left;
}

JS

makeTable();

function makeTable() {
var table = document.getElementById("table");
var row ='';

for(var i=0;i<2;i++) 
{    
    for(var j=0;j<6;j++) 
    {
        row += "<div class='box'></div>";
    }
    table.innerHTML += "<div class='col'>"+row+"</div>";
    row ='';
}
}

Answer 4

它似乎工作，看看：http: //jsfiddle.net/fCSTp/1/

var i = 0, div,
    node = document.createElement("div"),
    main = document.getElementById("main");

while (6 > i++) {
    div = node.cloneNode(true);
    div.innerHTML = i;
    div.style.cssText = "width:200px;height:20px;float:left;border:1px solid red";
    main.appendChild(div);
}

delete node;
delete div;

Answer 5

<br style="clear:both"/>在每行的末尾插入 a ：

for(var i=0;i<2;i++) {
    for(var j=0;j<5;j++) {
        document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />')+"\n";    
    }
    document.write('<br style="clear:both"/>');
}