title: JavaScript - Iterate over dynamically create html
body: <p>I am trying to write a constructor function with a method that loops over a number of rows (numerical argument), and for each of the individual rows then loops over a number of dots(numerical argument). In Each of the two loops a portion of html will be rendered. I can get the first portion html to render but when i try to loop over second portion using a selector from the previously rendered html nothing happens. What am i missing ?</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;h1 class="heading"&gt;Random Colors&lt;/h1&gt;
     &lt;div class="row"&gt;
         &lt;div id="frame" class="col-xs-12"&gt;
             &lt;!-- CONTENT PUSHED BY JAVASCRIPT --&gt;     
         &lt;/div&gt;  
     &lt;/div&gt;&lt;!-- Ends .row --&gt;  
  &lt;/div&gt;&lt;!-- Ends .container --&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT CODE</strong></p>
  
  <pre><code>var ColorDots = function(rows, dots) {
      this.numOfRows = rows;
      this.numOfDots = dots;
      this.renderDots();
  
  };
  
  ColorDots.prototype.renderDots = function() { 
  
      this.rowTemplate = '&lt;div class="color-dot row"&gt;&lt;/div&gt;';
      this.iconTemplate = '&lt;i class="fa fa-circle icon" aria-hidden="true"&gt;&lt;/i&gt;';     
  
      for ( var r = 0; r &lt; this.numOfRows; r++) {
  
          document.getElementById('frame').innerHTML += this.rowTemplate;
  
          for ( var i = 0; i &lt; this.numOfDots; i++) {
  
              document.getElementsByClassName('color-dot').innerHTML += this.iconTemplate;
          }            
      }    
  };
  </code></pre>
  
  <p><strong>SOLUTION</strong> (javascript only)</p>
  
  <pre><code>    var ColorDots = function(rows, dots) {
  
          // Properties
          this.numOfDots = dots;
          this.numOfRows = rows || 1;
          this.iconHtml = '&lt;i class="fa fa-circle icon" aria-hidden="true"&gt;&lt;/i&gt;';
  
          this.renderRows();
  
      };    
  
      ColorDots.prototype.renderRows = function() { 
  
          this.rowHtml = ''; 
  
          for ( var r = 0; r &lt; this.numOfRows; r++) {
  
               this.rowHtml += '&lt;div class="color-dot row"&gt;';
  
              for ( var i = 0; i &lt; this.numOfDots; i++) {            
                   this.rowHtml += this.iconHtml;
              }  
  
              this.rowHtml    += '&lt;/div&gt;';
          }
  
          document.getElementById('frame').innerHTML = this.rowHtml;
  
  };
  </code></pre>
  
  <p>Thank you @rainerh for giving me the answer to my question. How ever after considering what @shilly said in the comment in regards to using <code>.innerHTML</code> within for loops i made some changes to my code to reflect his suggestion. Hopefully this will be useful for other trying to do something similar to me.</p>