Schleife über div mit Javascript

Question

Ich versuche, divs Schleife und div Elemente dynamisch einfügen, aber es nur nur ein div Element in die HTML-Seite einfügen. Dies ist mein 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< articleData.length; i++) { 
     var content = `<div class="container"> 
      <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
      <div class="post-preview"> 
        <a href="/${articleData[i].title}"> 
         <h2 class="post-title"> 
         ${articleData[i].heading}</h2> 
         <h3 class="post-subtitle"> 
         ${articleData[i].subtitle}</h3> 
         </a> 
     <p class="post-meta">Posted by <a href="#">${articleData[i].author}</a> on Date ${articleData.date[i].toDateString()}</p> 
     </div> 
     </div> 
     </div> 
     </div>`; 
      } 
      articles.innerHTML = content; 
     } else { 
      articles.innerHTML('Oops! Could not load all articles!') 
     } 
    } 
}; 

Answer 1

InnerHtml ist eine Zeichenfolge. Also wird Ihr Code den Inhalt ich mal überschreiben. Sie müssen die Zeichenfolge hinzuzufügen:

articles.innerHTML+=content; 

Und diese Linie sein muss innerhalb der for-Schleife ...

Answer 2

Sie sind, indem er erklärt Inhalt innerhalb der Schleife den Inhalt jeder Schleife Schritt überschrieben wird. Sie sollten content außerhalb der Schleife deklarieren und dann Post-Loop zuweisen.

var content = ''; 

for (var i=0; i< articleData.length; i++) { 
    content += `<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
     <div class="post-preview"> 
      <a href="/${articleData[i].title}"> 
      <h2 class="post-title"> 
       ${articleData[i].heading}</h2> 
      <h3 class="post-subtitle"> 
       ${articleData[i].subtitle}</h3> 
      </a> 
      <p class="post-meta"> 
      Posted by <a href="#">${articleData[i].author}</a> 
      on Date ${articleData.date[i].toDateString()} 
      </p> 
     </div> 
     </div> 
    </div> 
    </div>`; 
} 

articles.innerHtml = content; 

Answer 3

versuchen wie folgt aus:

 } 
      articles.innerHTML += content; 
     } else { 
      articles.innerHTML ='Oops! Could not load all articles!'; 
     } 

Das erste, was Sie über sind, schreiben die vorhandenen Daten .so + .Es verwenden die Daten

Und zweitens hängen Sie ist ein syntax errorinnerHTML= statt innerHTML()

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< articleData.length; i++) { 
     var content = `<div class="container"> 
      <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 
      <div class="post-preview"> 
        <a href="/${articleData[i].title}"> 
         <h2 class="post-title"> 
         ${articleData[i].heading}</h2> 
         <h3 class="post-subtitle"> 
         ${articleData[i].subtitle}</h3> 
         </a> 
     <p class="post-meta">Posted by <a href="#">${articleData[i].author}</a> on Date ${articleData.date[i].toDateString()}</p> 
     </div> 
     </div> 
     </div> 
     </div>`; 
      } 
      articles.innerHTML += content; 
     } else { 
      articles.innerHTML ='Oops! Could not load all articles!'; 
     } 
    } 
};