2
\$\begingroup\$

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!

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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('')
  );
},
\$\endgroup\$
2
  • \$\begingroup\$ .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. \$\endgroup\$ Sep 28, 2016 at 15:38
  • \$\begingroup\$ also, I'd never heard of the .insertAdjacentHTML, very good read \$\endgroup\$ Sep 28, 2016 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.