title: Creating a HTML block with childs an classes - Javascript
body: <p>In my Firebase database(basically a javascript object) there is an array of Objects each object needs to be inserted into my HTML. </p>
  
  <p>Each Object has 3 properties: dbIsNewExercise, dbExerciseName and dbExerciseTime. If the dbIsNewExercise property is set I want to insert some extra elements.  </p>
  
  <p>The HTML I try to create looks like this:</p>
  
  <pre><code>&lt;section class="card oefening"&gt;
    &lt;div class="card-container"&gt;
      &lt;div class="oefening-icon"&gt;&lt;/div&gt;
      &lt;!-- The div.oefening-icon-nieuw only if the dbIsNewExercise property is set to true --&gt;
      &lt;div class="oefening-icon-nieuw"&gt;&lt;/div&gt;
      &lt;div class="oefening-info"&gt;
        &lt;!-- H3 element only if the dbIsNewExercise property is set to true --&gt;
        &lt;h3&gt;Nieuw&lt;/h3&gt;
        &lt;h4&gt;- 15 min&lt;/h4&gt;
      &lt;/div&gt;
      &lt;h2&gt;Ritmisch ademen&lt;/h2&gt;
      &lt;div class="open-card-icon"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>There is also a parent element with an id of "oefeningen", so i can insert each HTML block as an child of #oefeningen.</p>
  
  <p>But when i try to use the following JavaScript code I get an ReferenceError stating that "classList is not defined".</p>
  
  <pre><code>    // Method to get the last object in a array
      if (!Array.prototype.last){
          Array.prototype.last = function(){
              return this[this.length - 1];
          };
      };
  
      // The parent element
      var exercises = document.getElementById("oefeningen"),
  
      // The Object returned by the database it's tested and returns the correct object.
          changedData = snapshot.val(), 
  
          newSection = document.createElement("section"),
          newAncor = document.createElement("a"),
          newDiv = document.createElement("div"),
          newH2 = document.createElement("h2"),
          newH3 = document.createElement("h3"),
          newH4 = document.createElement("h4");
  
      var newCard = classList.add("card", "oefening"),
          newCardContainer = classList.add("card-container"),
          newOefeningIcon = classList.add("oefening-icon"),
          newOefeningIconNieuw = classList.add("oefening-icon-nieuw"),
          newOefeningInfoHolder = classList.add("oefening-info"),
          openCardIcon = classList.add("open-card-icon");
  
      exercises.appendChild(newSection.newCard);
      var card = document.getElementsByClassName('card').last();
  
      card.appendChild(newDiv.newCardContainer);
      var cardContainer = document.getElementsByClassName('card-container').last();
  
      cardContainer.appendChild(newDiv.newOefeningIcon);
      if (changedData.dbIsNewExercise == true) {
          cardContainer.appendChild(newDiv.newOefeningIconNieuw);
      }
  
      cardContainer.appendChild(newDiv.newOefeningInfoHolder);
      var oefeningInfoHolder = document.getElementsByClassName('oefening-info').last();
  
      if (changedData.dbIsNewExercise == true) {
          oefeningInfoHolder.appendChild(newH3);
          oefeningInfoHolder.appendChild(newH4);
      } else {
          oefeningInfoHolder.appendChild(newH4);
      }
      cardContainer.appendChild(newH2);
      cardContainer.appendChild(openCardIcon);
  
      newH2.innerHTML = changedData.dbExerciseName;
  
      if (changedData.dbIsNewExercise == true) {
          newH3.innerHTML = "Nieuw";
          newH4.innerHTML = " - " + changedData.dbExerciseTime + "min";
      } else {
          newH4.innerHTML = changedData.dbExerciseTime + "min";
      }
  </code></pre>
  
  <h2>The solution</h2>
  
  <p>For anyone who stumbles on this topic, the solution was given by @viveksinghggits in the comments. First create the elements, add the class lists to them, and then append them to a parent.</p>
  
  <pre><code>    var oefeningen = document.getElementById("oefeningen"),
          changedData = snapshot.val(),
  
          newCard = document.createElement("section"),
          newAncor = document.createElement("a"),
          newCardContainer = document.createElement("div"),
          newOefeningIcon = document.createElement("div"),
          newOefeningIconNieuw = document.createElement("div"),
          newOefeningInfo = document.createElement("div"),
          openCardIcon = document.createElement("div"),
          newH2 = document.createElement("h2"),
          newH3 = document.createElement("h3"),
          newH4 = document.createElement("h4");
  
      newCard.classList.add("card", "oefening");
      newCardContainer.classList.add("card-container");
      newOefeningIcon.classList.add("oefening-icon");
      newOefeningIconNieuw.classList.add("oefening-icon-nieuw");
      newOefeningInfo.classList.add("oefening-info");
      openCardIcon.classList.add("open-card-icon");
  
      newCard.appendChild(newAncor);
      newAncor.appendChild(newCardContainer);
      newCardContainer.appendChild(newOefeningIcon);
      if (changedData.dbIsNewExercise == true) {
          newCardContainer.appendChild(newOefeningIconNieuw);
      }
  
      newCardContainer.appendChild(newOefeningInfo);
      if (changedData.dbIsNewExercise == true) {
          newOefeningInfo.appendChild(newH3);
          newOefeningInfo.appendChild(newH4);
      } else {
          newOefeningInfo.appendChild(newH4);
      }
      newCardContainer.appendChild(newH2);
      newCardContainer.appendChild(openCardIcon);
  
      newH2.innerHTML = changedData.dbExerciseName;
  
      if (changedData.dbIsNewExercise == true) {
          newH3.innerHTML = "Nieuw";
          newH4.innerHTML = " - " + changedData.dbExerciseTime + "min";
      } else {
          newH4.innerHTML = changedData.dbExerciseTime + "min";
      }
  
      oefeningen.appendChild(newCard);
  </code></pre>