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

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

按照我的设置方式，每次我想用新数据发布到我的文章字段时，我都必须创建一个单独的div。这变得相当混乱，因为我基本上希望有很多文章都充满了这些数据，我不想继续创建单独的DIV

是否有一种方法可以只使用一个article image div，然后按程序创建新的article image div，并根据数组号使用API数据填充它们？

var-url=
“隐藏的API密钥”；
var req=新请求（url）；
获取（请求）
.然后（功能（响应）{
返回response.json（）；
})
.然后（功能（res）{
控制台日志（res）；
document.getElementById（“体育场名称”）.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（“体育场名称2”）.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）；
});


Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷商在厨房里
打字，然后把它拼凑成一本样书。


Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷商在厨房里
打字，然后把它拼凑成一本样书。


Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷商在厨房里
打字，然后把它拼凑成一本样书。


Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷商在厨房里
打字，然后把它拼凑成一本样书。

您可以创建“Article”类，该类将处理新HTML Article元素的创建以及嵌套子元素（title、img、description）并填充其内容。当您收到来自API的响应时，您可以对其进行循环，并将新创建的文章附加到HTML容器中。用文章填充此容器后，可以将所有文章一次呈现给客户端


类文章{
构造函数（ArticleData）{
this.article=document.createElement（'article'）；
this.title=document.createElement（'h3'）；
this.img=document.createElement（'img'）；
this.description=document.createElement（'p'）；
this.populateContainer（）；
此。populateContent（ArticleData）；
}
populateContainer（）{
本.article.appendChild（本.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（）{
归还此物品；
}
}
获取（'apident'））
.then（res=>res.json（））
.然后（文章=>{
const wrapper=document.createElement（'div'）；
fakeResponse.forEach（article=>wrapper.appendChild（newarticle（article.getNode（））；
document.body.appendChild（包装器）；
})
是什么阻止您动态创建这些div/article？您的代码中已经有
document.createElement
和
element.appendChild
。您可以使用它们动态创建顶级div。您所需要的只是一个循环，循环遍历
res.articles
列表。看起来您正在创建标记，然后再拉拽