CODEWITHSUNDEEP
javascriptjqueryhtml
Jerome
Jerome

Reputation: 23

Creating div elements using .innerHTML gives unexpected result

I'm trying to create an array of Divs, but the below code runs incorrectly.

JS Code that runs incorrectly (actual JS below): http://codepen.io/anon/pen/admWpm

var n=4;        //no. of Triangles
    var j=1; // j is just used to number the triangles
     for(var i=1;i<n;i++)
        {
        document.body.innerHTML+='<div class="row row'+i+'">';  //Open row div

        //Create squares
            for(var k=0;k<n;k++){
                if (k % 2 === 0) {  //Even squares
                    document.body.innerHTML+='<div class="square square1 '+(j++)+'"></div>';
                }
                else{               //Odd squares
                    document.body.innerHTML+='<div class="square square2 '+(j++)+'"></div>';
                }
            }
    document.body.innerHTML+='</div>'; //close row div
    }

Simplification of the output:

<div class="row row1"></div>
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
<div class="row row2"></div>
<div class="square square5"></div>
<div class="square square6"></div>
<div class="square square7"></div>
<div class="square square"></div>

The output I would like:

<div class="row row1"></div>
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
</div>
<div class="row row2">
<div class="square square5"></div>
<div class="square square6"></div>
<div class="square square7"></div>
<div class="square square"></div>
</div>

I think I'm using innerHTML incorrectly?

Upvotes: 0

Views: 152

Answers (1)

user1106925
user1106925

Reputation:

Here's a quick example using DOM methods to create and append elements.

var n = 4; //no. of Triangles
var j = 1; // j is just used to number the triangles

for (var i = 1; i < n; i++) {
  var d = document.body.appendChild(document.createElement("div"));
  d.className = "row row" + i;

  //Create squares
  for (var k = 0; k < n; k++) {
    var s = d.appendChild(document.createElement("div"));
    s.textContent = "i:" + i + ", j:" + j;
    s.className = "square square" + ((k % 2) + 1) + " " + j++;
  }
}
.square {
  width: 70px; 
  height: 30px;
  margin: 4px;
  background: orange;
  color: white;
  }
.square2 {
  background: red;
  }

The square classes in your code didn't seem to match your desired output, so you may need to tweak a little there.

I added a little text content and CSS to make it easier to view the output.

Upvotes: 1

Related Questions