Loop through array while creating one div.row and appending three div.col-lg-4

Question

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:

1. allData in createDiv has anywhere from 20-500 elements ["string", "string",...] (created elsewhere)
2. I need it to create a div.row (I'm using bootstrap) and send to DOM
3. Append three elements from allData to that created div.row in DOM
4. 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 < 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!

Answer 1

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 > 0 ? '' : '<div class="row row-border" id="' + index + '">';
 var after = index % 3 < 2 ? '' : '</div>';
 return before + '<div class="col-lg-4 text-center">' + item + '</div>' + after;
 }).join('')
 );
},

• Wayne Bunch: .map! I had forgotten about this. I knew my search for id was a bad idea. Will implement and update, thank you for the info.
• Wayne Bunch: also, I'd never heard of the .insertAdjacentHTML, very good read