title: appending a child using foreach
body: <p>Supposed I have a response of </p>
  
  <p><a href="https://i.stack.imgur.com/q5BQK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q5BQK.png" alt="enter image description here"></a></p>
  
  <p>And I loop through the array via </p>
  
  <pre><code>    response.data.aTweets.forEach(element =&gt; {
          //console.log(element);
          element.pics.forEach(pic =&gt; {
              var image = new Image();
              image.height = 180;
              image.classList.add('mt-2','rounded','mr-2', 'w-100');
              image.src    = pic;
              oHome.oImageRow1.appendChild(image); //append to image row one if length is &lt;= 2
              oHome.oImageRow2.appendChild(image); //append to image row one if length is &gt; 2
          });
          oHome.oTweetContainer.appendChild(oHome.oClone);
      });
  </code></pre>
  
  <p>and this my oImageRow1 and oImageRow2</p>
  
  <pre><code>&lt;div class="row" id="image_row_one"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="row" id="image_row_two"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I append to image row one if the length of the element.pics is greater than 2</p>
  
  <p>I tried to use the element.pics.length however it is constant. I think i might need a counter or something</p>