Как автоматизовать вывод повторяющего html кода?

Рейтинг: 0Ответов: 1Опубликовано: 23.07.2023
function Template({ src, title, capital }) {
  this.src = src;
  this.title = title;
  this.capital = capital;

  let contentOut = document.querySelector(".content");
  contentOut.innerHTML = `
    <div class="box">
            <img src="${this.src}" alt="img">
            <h3>${this.title}</h3>
            <p>${this.capital}</p>
    </div>
    `;
}

let c1 = new Template({
  src: "img1.png",
  title: "Китай",
  capital: "Пекин",
});

let c2 = new Template({
  src: "img2.webp",
  title: "Сингапур",
  capital: "Сингапур",
});

Что я делаю не так? Два объекта, но выводит на страницу один, как вывести каждый отдельно?

введите сюда описание изображения

javascript html функции объекты
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Свойство innerHTML заменяет содержимое элемента на новое. Чтобы вставлять новые элементы без замены предыдущих используйте insertAdjacentHTML:

function Template({ src, title, capital }) {
  this.src = src;
  this.title = title;
  this.capital = capital;

  let contentOut = document.querySelector(".content");
  contentOut.insertAdjacentHTML('beforeend',
    `<div class="box">
      <img src="${this.src}" alt="img">
      <h3>${this.title}</h3>
      <p>${this.capital}</p>
    </div>`);
}

let c1 = new Template({
  src: "img1.png",
  title: "Китай",
  capital: "Пекин",
});

let c2 = new Template({
  src: "img2.webp",
  title: "Сингапур",
  capital: "Сингапур",
});
<body class="content">
</body>