title: looping over div using javascript
body: <p>I'm trying to loop over divs and insert div items dynamically but its just inserting only one div item into the html page.
  this is my code : </p>
  
  <pre><code>     function loadArticles ()      {        
       var request = new XMLHttpRequest();   
       request.onreadystatechange = function (){   
           if (request.readyState === XMLHttpRequest.DONE){   
            var articles = document.getElementById('articles');  
              if (request.status === 200) {  
                var articleData = JSON.parse(this.responseText);  
                  for (var i=0; i&lt; articleData.length; i++) {  
           var content = `&lt;div class="container"&gt;
            &lt;div class="row"&gt;
         &lt;div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"&gt;
               &lt;div class="post-preview"&gt;
                    &lt;a href="/${articleData[i].title}"&gt;
                        &lt;h2 class="post-title"&gt;
                         ${articleData[i].heading}&lt;/h2&gt;
                         &lt;h3 class="post-subtitle"&gt;
                         ${articleData[i].subtitle}&lt;/h3&gt;
                        &lt;/a&gt;
         &lt;p class="post-meta"&gt;Posted by &lt;a href="#"&gt;${articleData[i].author}&lt;/a&gt; on Date ${articleData.date[i].toDateString()}&lt;/p&gt;
         &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;`;
              }
              articles.innerHTML = content;
          } else {
              articles.innerHTML('Oops! Could not load all articles!')
          }
      }
  };
  </code></pre>