Question: I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.

css:

```
div{
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-child(6n+1){
    clear:both;
}

```

javascript:

```
for(var i=0; i<36; i++){
    document.body.appendChild(document.createElement('div'));
}

```

<https://jsfiddle.net/kqzhorq0/>

The above link demonstrates what I see in the browser.

But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.

How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?

Answer: 
If you can wrap your divs in a container and specify your selectors to target from within the container your code will work. 

Here is a working snippet:

```js
for(var i=0; i<36; i++){
    document.getElementById("foo").appendChild(document.createElement('div'));
}
```

```css
#foo div{
  width:30px;
  height:30px;
  margin:0px;
  border:1px solid black;
  float:left;
}

#foo div:nth-child(6n+1){
  clear:both;
}
```

```html
<div id="foo"></div>
```

I also created an interactive demo on nth-child to help explain it further: <http://xengravity.com/demo/nth-child/>
The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.

The [nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) will consider all the elements while using the index to search for an element, but using [nth-of-type](https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type) you can search for a particular type.

One choice is to use the :nth-of-type selector as below

```
div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
div:nth-of-type(6n+1) {
    clear:both;
}

```

Demo: [Fiddle](https://jsfiddle.net/arunpjohny/pvfp1tyk/1)

---

Another is to insert the divs before the script like

```
for (var i = 0; i < 36; i++) {
    document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}

```

Demo: [Fiddle](https://jsfiddle.net/arunpjohny/pvfp1tyk/2/)

---

But a better solution will be use a custom container element instead of the body element

```
var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
    ct.appendChild(document.createElement('div'));
}

```

then

```
#container > div {
    width:30px;
    height:30px;
    margin:0px;
    border:1px solid black;
    float:left;
}
#container div:nth-child(6n+1) {
    clear:both;
}

```

Demo: [Fiddle](https://jsfiddle.net/arunpjohny/pvfp1tyk/3/)