使用javascript在div上循环

我试图循环div并动态插入div项，但它只是将一个div项插入到html页面中。 这是我的代码：

     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!')
        }
    }
};

函数loadArticles（）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
如果（request.readyState==XMLHttpRequest.DONE）{
var articles=document.getElementById（'articles'）；
如果（request.status==200）{
var articleData=JSON.parse（this.responseText）；
对于（var i=0；i在日期${articleData.Date[i].toDateString（）上由发布者发布

`;
}
articles.innerHTML=内容；
}否则{
articles.innerHTML（'Oops！无法加载所有文章！'）
}
}
};

InnerHtml是一个字符串。因此，您的代码将覆盖内容i次。您需要添加到字符串中：

articles.innerHTML+=content;

---

这一行需要位于for循环的内部…

通过在循环内部声明内容，您正在覆盖每个循环步骤的内容。您应该在循环外部声明内容，然后将其分配给post循环

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;

var内容=”；
对于（var i=0；i
邮寄人
日期${articleData.Date[i].toDateString（）}

`;
}
articles.innerHtml=内容；

试着这样做：

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

第一件事是重写现有数据。所以使用

+

。它将附加数据

第二个是

语法错误

innerHTML=

而不是

innerHTML（）

函数loadArticles（）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
如果（request.readyState==XMLHttpRequest.DONE）{
var articles=document.getElementById（'articles'）；
如果（request.status==200）{
var articleData=JSON.parse（this.responseText）；
对于（var i=0；i在日期${articleData.Date[i].toDateString（）上由发布者发布

`;
}
articles.innerHTML+=内容；
}否则{
articles.innerHTML='Oops！无法加载所有文章！'；
}
}
};

   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!';
        }
    }
};