Как правильно добавлять новые элементы в DOM с помощью JS?

Question

[volucris1]

Как это сделать правильно:
1. Создать элеммент, а потом его добавить
document.createElement(...)
2. Определить .innerHTML
element.innerHTML(...)
3. Есть лучший вариант?

Answer 1

[Сергей Соколов]

И так и так можно.

У способов свои особенности. Например, очевидно, innerHTML заменит собой все, что было ранее. А createElement() позволяет заранее навесить слушателей событий прямо на создаваемый элемент.

Для оценки, что лучше, в вопросе недостаточно данных. Какова задача, как сами оцениваете каждый из двух способов?

Comments

[volucris1]

Мне способ с createElement кажется правильней:

data.forEach((el) => {
      console.log(el);
      const item = document.createElement('div');
      item.classList.add(topFilms.topItem);

      const image = document.createElement('img');
      image.src = el.posterUrlPreview;
      item.appendChild(image);

      const titleBox = document.createElement('div');
      titleBox.classList.add(topFilms.titleBox);
      item.appendChild(titleBox);

      const title = document.createElement('h2');
      title.innerHTML = `${el.nameRu}`;
      titleBox.appendChild(title);

      const about = document.createElement('div');
      about.classList.add(topFilms.about);
      titleBox.appendChild(about);

      const filmLenght = document.createElement('p');
      filmLenght.innerText = `Продолжительность ${el.filmLength}`;
      about.appendChild(filmLenght);

      const year = document.createElement('p');
      year.innerText = `Год: ${el.year} /`;
      about.appendChild(year);

      const rating = document.createElement('p');
      rating.innerText = `Рейтинг: ${el.rating}`;
      about.appendChild(rating);

      this.topBox[0].appendChild(item);
    });

Но вот с innerHTML это выглядит более оптимизировано.

[volucris1]

Моя задача, получить n фильмов (картинка-постер, название, год, время), и воткнуть это на страницу вот так:

<div class="_topItem_1nar4_8">
<img src="https://kinopoiskapiunofficial.tech/images/posters/kp_small/326.jpg">
<div class="_titleBox_1nar4_18">
<h2>Побег из Шоушенка</h2>
<div class="_about_1nar4_29">
<p>Продолжительность 2:22</p>
<p>Год: 1994 /</p>
<p>Рейтинг: 9.2</p>
</div>
</div>
</div>

Создаю проект проект в целях учёбы

[Сергей Соколов]

volucris1, часто встречающаяся задача: в цикле создать по темплейту какие-то компоненты. Простой её вариант, без всяких событий-логики-интерактива. По сути просто генерация строки из темплейта. Поэтому, в этом случае, наверное, излишне возиться с createElement(): итоговая структура неочевидна, сложнее менять.

Для удобства работы с кодом, я бы HTML этого куска вставил в страницу как элемент <template> с плейсхолдерами типа {{title}}, которые потом заменять на значения для очередного фильма.

Ну, или это хороший момент наконец, начать разобираться с VueJS и сделать на нём пока только этот момент.

[volucris1]

Сергей Соколов, боже мой, я же с React работаю! Спасибо! Пропсы!

[Сергей Соколов]

рад, что напомнил )))