必须为我从 API 中提取的每篇文章创建一个单独的 div

Question

在为一个大学项目创建网站的过程中，现在我已经设置了我的新闻API，可以使用JavaScript成功地从中提取和发布数据。

按照我的设置方式，每次我想用新数据发布到我的一个文章字段中时，我都必须创建一个单独的div。这变得相当混乱，因为我从根本上想让很多文章都充满这些数据，而且我不想一直创建单独的DIV。

有没有办法只拥有一个article-imagediv，然后按程序创建新的div，并根据数组编号用API数据填充它们？

var url =
"HIDDEN_API_KEY";
var req = new Request(url);
fetch(req)
.then(function(response) {
return response.json();
})
.then(function(res) {
console.log(res);
document.getElementById("stadium_name").innerHTML = (res.articles[1].title);
document.getElementById("stadium_description").innerHTML = (res.articles[1].content);

var articleimg1 = document.getElementById('article-image1'); 
articleimg1.appendChild(document.createElement('img')).src = (res.articles[1].urlToImage);
document.getElementById("stadium_name2").innerHTML = (res.articles[2].title);
document.getElementById("stadium_description2").innerHTML = (res.articles[2].content);
var articleimg2 = document.getElementById('article-image2'); 
articleimg2.appendChild(document.createElement('img')).src = (res.articles[2].urlToImage);
document.getElementById("stadium_name3").innerHTML = (res.articles[3].title);
document.getElementById("stadium_description3").innerHTML = (res.articles[3].content);
var articleimg3 = document.getElementById('article-image3'); 
articleimg3.appendChild(document.createElement('img')).src = (res.articles[3].urlToImage);
document.getElementById("stadium_name4").innerHTML = (res.articles[4].title);
document.getElementById("stadium_description4").innerHTML = (res.articles[4].content);
var articleimg4 = document.getElementById('article-image4'); 
articleimg4.appendChild(document.createElement('img')).src = (res.articles[4].urlToImage);

});

<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 stadiumCard">
<h3 id="stadium_name"></h3>
<div id="article-image1"></div>
<p id="stadium_description">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 stadiumCard">
<h3 id="stadium_name2"></h3>
<div id="article-image2"></div>
<p id="stadium_description2">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 stadiumCard">
<h3 id="stadium_name3"></h3>
<div id="article-image3"></div>
<p id="stadium_description3">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch">
<div class="card mt-4 stadiumCard">
<h3 id="stadium_name4"></h3>
<div id="article-image4"></div>
<p id="stadium_description4">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</p>
</div>

Answer 1

您可以创建"Article"类，该类将处理带有嵌套子级(title、img、description(的新HTML文章元素的创建并填充其内容。当您收到来自API的响应时，您可以循环通过它并将新创建的文章附加到HTML容器中。在用文章填充这个容器之后，您可以一次将所有文章呈现给您的客户端。

class Article {
constructor(ArticleData) {
this.article = document.createElement('article');
this.title = document.createElement('h3');
this.img = document.createElement('img');
this.description = document.createElement('p');
this.populateContainer();
this.populateContent(ArticleData);
}
populateContainer() {
this.article.appendChild(this.title);
this.article.appendChild(this.img);
this.article.appendChild(this.description);
}
populateContent(ArticleData) {
this.title.innerText = ArticleData.title;
this.img.src = ArticleData.img;
this.description.innerText = ArticleData.description;
}
getNode() {
return this.article;
}
}
fetch('APIendpoint')
.then(res => res.json())
.then(articles => {
const wrapper = document.createElement('div');
fakeResponse.forEach(article => wrapper.appendChild(new Article(article).getNode()));
document.body.appendChild(wrapper);
})