(ES6) Данные из JSON в HTML (div)

Question

У меня есть этот JSON-файл:

{
 "clubs":  [
{
  "name": "Feyenoord Rotterdam",
  "origin": "Zuid-Holland",
  "championships": "15"

},

{
  "name": "Sparta Rotterdam",
  "origin": "Zuid-Holland",
  "championships": "6"
},

{
  "name": "AZ Alkmaar",
  "origin": "Noord-Holland",
  "championships": "2"
},

{
  "name": "Willem II",
  "origin": "Noord-Brabant",
  "championships": "3"
},

{
  "name": "PSV Eindhoven",
  "origin": "Noord-Brabant",
  "championships": "24"

}
]
}

Я хочу поместить данные (имя, происхождение, чемпионаты) из каждого клуба в отдельный блок.Я пытаюсь сделать это с ES6.Это мой код прямо сейчас:

{

    const createDiv = clubs => {
    const $div = document.createElement(`div`);
    $div.classList.add(`club-info`);
    document.querySelector(`.clubs`).appendChild($div);

    const $club = document.createElement(`p`);
    $club.classList.add(`.clubname`);
    $club.textContent = `${clubs.name}`;

    const $origin = document.createElement(`p`);
    $origin.classList.add(`.origin`);
    $origin.textContent = `${clubs.origin}`;

    const $championships = document.createElement(`p`);
    $championships.classList.add(`.championships`);
    $championships.textContent = `${clubs.championships}`;


    document.querySelector(`.club-info`).appendChild($club);
    document.querySelector(`.club-info`).appendChild($origin);
    document.querySelector(`.club-info`).appendChild($championships);
  };

  const makeDivs = clubs => {
   clubs.forEach(club => {
      createDiv(club);
    });
};

const parse = clubs => {
  makeDivs(clubs);
};

  const init = () => {
    const url = `./assets/data/data.json`;

    fetch(url)
            .then(r => r.json())
            .then(json => parse(json.clubs));
  };
  init();

}

Проблема сейчас в том, что у меня есть 5 разных div с классом "club-info", но все данные поступают в первый div, как вы можете видеть визображение.

проблема с изображением

Answer 1

Когда вы делаете

document.querySelector(`.club-info`).appendChild($club);
document.querySelector(`.club-info`).appendChild($origin);
document.querySelector(`.club-info`).appendChild($championships);

, он ищет первый элемент .club-info каждый раз.Он не знает, что вы хотите использовать элемент, который также хранится в $div.

Поскольку $div содержит ваш текущий элемент .club-info, вы можете использовать вместо него эту переменную:

$div.appendChild($club);
$div.appendChild($origin);
$div.appendChild($championships);