I am basically trying to create using javascript a 40x40 red grid of divs in my html document.

Here's my loop:

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }

The problem is I can't seem to get it to form a square of all the divs I created. The container is 1000 x 1000 px. Thank you

I am basically trying to create using javascript a 40x40 red grid of divs in my html document.

Here's my loop:

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }

The problem is I can't seem to get it to form a square of all the divs I created. The container is 1000 x 1000 px. Thank you

• javascript
• html
• css

• did you try adding a width and height with css? – blurfus Commented Oct 19, 2015 at 20:43
• yes the container is 1000 x 1000 px @ochi – abedzantout Commented Oct 19, 2015 at 20:43
• you'll need to set the CSS float property for all your divs... don't really need js at all – mb21 Commented Oct 19, 2015 at 20:45
• you're adding a break right after each of the divs and you need to set their display property to inline-block – Juan Commented Oct 19, 2015 at 20:46
• @mb21 I can do it in css, but I wanna know how to do it in javascript – abedzantout Commented Oct 19, 2015 at 20:47

7 Answers 7

All you need is to put the last 3 lines inside the inner loop (not inside the outer loop):

for(var i = 0; i < 40; i++) {
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";

        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }
}

Also, don't forget to set the 'display' to 'inline-block':

div.style.display = "inline-block";

Or, you have to use the 'float' attribute:

div.style.float = "left";

EDIT:

Use row-div to group each 40 cells in a row:

for(var i = 0; i < 40; i++) {
    var row = document.createElement("div");
    for(var j = 0; j< 40; j++) {
        var cell = document.createElement("div");
        cell.style.width = "25px";
        cell.style.height = "25px";
        cell.style.background = "red";
        cell.style.display = "inline-block"

        row.appendChild(cell);
    }
    document.getElementById("container").appendChild(row);
}

I believe what you want is the following:

for (var i = 0; i < 40; i++) {
    for (var j = 0; j < 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        document.getElementById("container").appendChild(div);
    }
    var jump = document.createElement("br");
    document.getElementById("container").appendChild(jump);
}

#container {
    width:1000px;
    height:1000px;
}
#container div {
    display:inline-block;
    vertical-align:top;
}

<div id="container"></div>

Your inner divs can be inline-block elements so that they flow next to each other (since divs by default are block level). You also need to insert a line break after each inner (j) loop. So the process would be: generate 40 inline divs, insert a line break, generate 40 inline divs, insert a line break,...(repeat 38 more times).

First of all, you need to append the created div on each loop iteration.

Second, you need to set the divs as display: inline or display: inline-block

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
            document.getElementById("container").appendChild(div);
        }
    }

#container {
  width: 1000px;
  height: 1000px;
}

#container > div {
  display: inline-block;
}

<div id="container"></div>

Here, this actually creates 40 divs in 40 parent divs (like rows):

for(var i = 0; i < 40; i++) {
    var div1 = document.createElement('div')
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        div.style.display = 'inline-block';
        div.style.margin = '1px'
        div1.appendChild(div)
    }
    document.getElementById('container').appendChild(div1);
}

http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info

Adding a bit of CSS and inline-block

Divs are typically block elements, you need to make them inline-blocks to help you with your grid.

If you want to remove the line gaps, play with margins (i.e. margin: 0; to reduce or margin: 0 1px; to add to the sides of each square)

for (var i = 0; i < 40; i++) {
  var jump = document.createElement("br");

  for (var j = 0; j < 40; j++) {
    var div = document.createElement("div");
    div.style.width = "25px";
    div.style.height = "25px";
    div.style.background = "red";
    document.getElementById("container").appendChild(div);
  }

  document.getElementById("container").appendChild(jump);
}

#container div {
  /* you need this */
  display: inline-block;

}

#container {
  width: 1000px;
  height: 1000px;
}

<div id="container">

</div>

You can use a mix of css, html and javascript.

IMHO, the best way is to take advantage of CSS classes and instead of creating each element individually in javascript, you can use cloneNode() to clone the first "box".

Here's an example (fiddle here) and snippet below

var parent = document.getElementById('parent'),
  box = parent.children[0];

for (var i = 0; i < 100; ++i) {
  var nBox = box.cloneNode(true);
  parent.appendChild(nBox);
}

.grid {
  width: 1000px;
  height: 1000px;
  background-color: green;
}
.box {
  float: left;
  width: 40px;
  height: 40px;
  background-color: red;
  border: 1px solid white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div id="parent" class="grid">
  <div class="box">&nbsp;</div>
</div>

Here this will do it for you:

<body onload="makeGrid()" id="container">
<body>
<script>
  function makeGrid(){
    for(var i = 0; i < 40; i++) {         
        for(var j = 0; j< 40; j++) {

            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
            document.getElementById("container").appendChild(div);
        }

        //document.getElementById("container").appendChild(jump);
        //document.getElementById("container").appendChild(div);
    }
    }
</script>

CSS

#container{width: 1000px; height: 1000px;}
div{float: left;}

See example: http://jsfiddle.net/bun4g2d0/9/