How to append Divs dynamically side by side using javascript using loops?

Question

Can you please help how to append Divs side by side using javascript using loops, here two columns and 6 rows. I tried the following code,

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";    
    }
}

Isn't this moar of a CSS issue rather than a JS issue? Also please don't use document.write(). — PeeHaa
– PeeHaa, Commented Aug 29, 2012 at 14:37
That would produce two rows and four columns, but the way it is written [minus the \n error] it would be one row until it wraps in the browser. — epascarello
– epascarello, Commented Aug 29, 2012 at 14:39

Mihai Iorga · Accepted Answer · 2012-08-29 14:47:36Z

2

html:

<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);
}

answered Aug 29, 2012 at 14:47

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

perilbrain · Accepted Answer · 2012-08-29 14:38:15Z

0

I think you have added the "\n" at wrong place.

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

Tested code:-

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>');  
        }
    }
}

answered Aug 29, 2012 at 14:38

perilbrain

8,2092 gold badges29 silver badges35 bronze badges

Comments

Kerem · Accepted Answer · 2012-08-29 15:10:13Z

0

It seems working, take a look: 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;

answered Aug 29, 2012 at 15:10

Kerem

11.6k5 gold badges61 silver badges58 bronze badges

Comments

manish · Accepted Answer · 2014-01-17 22:42:20Z

0

Try this

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 ='';
}
}

edited Jan 17, 2014 at 22:42

answered Aug 29, 2012 at 14:52

manish

4979 silver badges17 bronze badges

Comments

gabitzish · Accepted Answer · 2012-08-29 14:40:34Z

-1

Insert a <br style="clear:both"/> at the end of each row:

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"/>');
}

answered Aug 29, 2012 at 14:40

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to append Divs dynamically side by side using javascript using loops?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related