Question

我创建了5个具有相同id和带循环的div。我现在正尝试使用与News API不同的标题填充每个div。我已设法用数据填充第一个div，但我正在努力如何将数据插入到其他数据中。

这是我的尝试

// Fetch Data from API
fetch(req)
  .then(r => r.json())
  .then(r => {
    const container = document.getElementsByClassName('postWrap')[0];

    // Create div elements
    for(i = 0; i < 5 ; i++) {
      // Create title div
      const titleDiv = document.createElement('div');
      container.appendChild(titleDiv);

      // Set ID & Class
      titleDiv.id = 'postTitle';
      titleDiv.classList.add('post-body');

      // Post title data from array into div
      let post = r.articles[i];
      let title = post.title;
      document.getElementById('postTitle').innerHTML = title;
    }
  });

Answer 1

DOM的id应该是唯一的。不建议使用相同的DOM ID。

您的div实例是由您的javascript代码创建的，因此您可以直接使用这些实例，但可以从ID获取。

const titleDiv = document.createElement('div');

/* Omitted.... */

// Post title data from array into div
let post = r.articles[i];
let title = post.title;
titleDiv.innerHTML = title;

将数据从Array插入到不同的HTML Div中

1 个答案: