javascript를 사용하여 div를 반복하는 코드

Question

div를 반복하고 div 항목을 동적으로 삽입하려고하지만 HTML 페이지에 하나의 div 항목 만 삽입하려고합니다. 이것은 내 코드입니다.

 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은 문자열입니다. 따라서 귀하의 코드는 번을 번으로 대체합니다. 당신은 문자열에 추가해야합니다

articles.innerHTML+=content; 

그리고이 줄 당신은 내용 루프 내부의 콘텐츠를 선언하여 모든 루프 단계를 덮어 쓰는

Answer 2

... 루프의 내부에 있어야합니다. content을 루프 외부에 선언 한 후 루프를 지정해야합니다. 이 같은

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

봅니다 :

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

당신이 끝났다 우선 쓰기 데이터

초를 추가합니다 + .IT를 사용 .SO 기존 데이터는 syntax error innerHTML= 대신 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!'; 
     } 
    } 
};