Loop through array while creating one div.row and appending three div.col-lg-4 As a newbie to Javascript (or coding for that matter), I'm sure I overdid this, but I couldn't get anything else to work.  Here's what I'm doing:


allData in createDiv has anywhere from 20-500 elements ["string", "string",...] (created elsewhere) 
I need it to create a div.row (I'm using bootstrap) and send to DOM
Append three elements from allData to that created div.row in DOM
Then repeat that cycle for allData.length


I couldn't figure out any other way to add one row and append three elements from the array to it.

createRow: function(number) {
    var parentDiv = document.getElementById("displayQuoteHere");
    var createRow = document.createElement("div");
        createRow.className = "row row-border";
        createRow.id = number;

    parentDiv.appendChild(createRow);
},
createDiv: function() {
    debugger;
    var allData = this.finalDellEqArray(); // allData = [100 or so elements]
    var incr = 0; // use this to go through my if else statements
    var parentRow = ''; // blank until first iteration - will be assigned according to [i]
    for (var i = 0; i &lt; allData.length; i++) {
        if (incr === 0) {
            this.createRow(i); // run my createRow function and assign it an id (i) to use later in appendChild
            parentRow = document.getElementById(i);
            var createDiv = document.createElement("div");
                createDiv.className = "col-lg-4 text-center";  // using bootstrap to create three columns
                createDiv.innerHTML = allData[i]; // assign innerHTML to each element in array
            parentRow.appendChild(createDiv);
            incr++; // increase this to goto next else-if without creating a row
        } else if (incr === 1) {
            var createDiv2 = document.createElement("div");
                createDiv2.className = "col-lg-4 text-center"; //dito
                createDiv2.innerHTML = allData[i];
            parentRow.appendChild(createDiv2);
            incr++; // increase this to goto next else-if without creating a row
        } else {
            var createDiv3 = document.createElement("div");
                  createDiv3.className = "col-lg-4 text-center";
                createDiv3.innerHTML = allData[i];
            parentRow.appendChild(createDiv3);
            incr = 0; // set incr back to zero so it will start again and create a row.
        }
    }
},


I don't want to use any libraries as I'm trying to learn Javascript.  Suggestions or tips to make this better would be much appreciated!
Currently your code accesses live DOM unnecessarily, which is slow. For example, it creates a row, then searches it by id in the document instead of returning directly. It's better to construct elements without attaching them to actual document, and attach when everything's done.

However, since you're using innerHTML there's no need to create DOM elements manually, just construct an overall HTML string and insert it in the document. The entire code boils down to:

createDiv: function() {
  document.getElementById("displayQuoteHere").insertAdjacentHTML('beforeend',
    this.finalDellEqArray().map(function(item, index) {
      var before = index % 3 &gt; 0 ? '' : '&lt;div class="row row-border" id="' + index + '"&gt;';
      var after = index % 3 &lt; 2 ? '' : '&lt;/div&gt;';
      return before + '&lt;div class="col-lg-4 text-center"&gt;' + item + '&lt;/div&gt;' + after;
    }).join('')
  );
},