Метод getElementByID не работает в Forloop с JSON-объектом?любая идея почему

Question

Я пытаюсь запустить приведенный ниже код, пытаюсь создать новый dIV для каждого объекта во время итерации, но по какой-то причине это не работает.кто-нибудь есть идеи, почему?

UserID = 2;

//window.onload = function() {


fetch('https://jsonplaceholder.typicode.com/posts?userId= ' + UserID)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
      for (i = 0; i < data.length; i++) {
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        div1.style.border = "1px solid black";
        div1.style.margin = "20px";
        div1.style.padding = "10px";

        div2.style.border = "1px solid black";
        div2.style.margin = "20px";
        div2.style.padding = "10px";

        document.body.appendChild(div1);
        document.body.appendChild(div2);
        document.getElementById(div1).innerHTML = data[i].title;
        document.getElementById(div2).innerHTML = data[i].body;
      }

    }

  );

Answer 1

Вы можете установить innerHTML перед добавлением каждого div.

UserID = 2;
fetch('https://jsonplaceholder.typicode.com/posts?userId=' + UserID)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    for (i = 0; i < data.length; i++) {
      var div1 = document.createElement("div");
      var div2 = document.createElement("div");
      div1.style.border = "1px solid black";
      div1.style.margin = "20px";
      div1.style.padding = "10px";
      div1.innerHTML = data[i].title; // Assign the innerHTML here before appending

      div2.style.border = "1px solid black";
      div2.style.margin = "20px";
      div2.style.padding = "10px";
      div2.innerHTML = data[i].body; // Assign the innerHTML here before appending

      document.body.appendChild(div1);
      document.body.appendChild(div2);
    }
  });

Или вы можете назначить id и использовать это id (вместо фактических элементов) с getElementById.Из документов:

Идентификатор элемента, который нужно найти.Идентификатор - чувствительная к регистру строка, которая уникальна в документе;только один элемент может иметь любой заданный идентификатор.

UserID = 2;
fetch('https://jsonplaceholder.typicode.com/posts?userId=' + UserID)
  .then(function(response) {
    return response.json();
  }).then(function(data) {

    for (i = 0; i < data.length; i++) {
      var div1 = document.createElement("div");
      var div2 = document.createElement("div");
      div1.style.border = "1px solid black";
      div1.style.margin = "20px";
      div1.style.padding = "10px";
      div1.id = data[i].id + "-title" // Assign a unique ID

      div2.style.border = "1px solid black";
      div2.style.margin = "20px";
      div2.style.padding = "10px";
      div2.id = data[i].id + "-body" // Assign a unique ID

      document.body.appendChild(div1);
      document.body.appendChild(div2);
      document.getElementById(data[i].id + "-title").innerHTML = data[i].title; // Find by the above unique ID
      document.getElementById(data[i].id + "-body").innerHTML = data[i].body; // Find by the above unique ID
    }
  })