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

Question

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

我设置它的方式每次我想用新数据发布到我的文章字段之一时都必须创建一个单独的 div。这变得非常混乱，因为我从根本上希望有很多文章填充这些数据，并且我不想继续创建单独的 DIV。

有没有办法只有一个 article-image 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>

标签： javascripthtmlcss

Answer 1

您可以创建“Article”类，该类将处理使用嵌套子项（标题、img、描述）创建新的 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);
  })