Append vs insertAdjacentHTML?

Question

[Ibishka]

Лучше добавлять товары в див через insertAdjacentHTML или append? Какой вариант быстрее??

Answer 1

[Шохрух Шаймардонов]

Гугл и СО вас забанили? Разжевано

Comments

[Ibishka]

Т.е appendChild лучше insertAdjacentHTML и append??

[Шохрух Шаймардонов]

Ibishka, зависит от задачи и как вы ее решаете

[Ibishka]

Moon Presence, Шохрух Шаймардонов, если я например вставляю продукты в дом какой метод использовать?

[Шохрух Шаймардонов]

Ibishka, какие продукты? есть такой тег? или что? Мы же не видим что там у вас творится. Залейте хотя бы код в песочницу (https://codepen.io / https://jsfiddle.net) и обновите вопрос. Тогда хоть яснее будет что для вас подойдет

[Ibishka]

Шохрух Шаймардонов,

goods.forEach(p => {
      if (p.sort.indexOf(sort.join(" ")) != -1) {
        const product = document.createElement("a");
        product.href = `pages/product.html?${p.id}`;
        product.className = "products__item";
        product.target = "_blank";
        product.innerHTML = `<div class="product-img">
    <img src="assets/img/product${p.id}.png" alt="${p.title}" />
  </div>
  <h3 class="product-txt">
    ${p.title}
  </h3>
  <p class="product-desc">
    Get the most out of your music with an experience.
  </p>
  <div class="pricing">
    <p class="price product-txt">
      $${p.price}
    </p>
    <ul class="stars">
      <li class="star star_painted"></li>
      <li class="star star_painted"></li>
      <li class="star star_painted"></li>
      <li class="star star_unpainted"></li>
      <li class="star star_unpainted"></li>
    </ul>
  </div>`;
        productsList.append(product);
      }
    });

[Шохрух Шаймардонов]

Ibishka, так у вас уже есть аппенд. В чем вопрос то тогда?

[Ibishka]

Шохрух Шаймардонов, раньше через insertAdjacentHTML вставлял вместо creatElement and append

[Шохрух Шаймардонов]

Ibishka, и что заставило вас поменять проверенный способ?

[Ibishka]

Шохрух Шаймардонов, Чел в ютубе добавлял через append. Тогда задумался какой вариант эффективен

[Шохрух Шаймардонов]

Вот вам бенчмарк (запускайте и смотрите что лучше)

И вот статья обязательная к прочтению.

Спойлер: appendChild быстрее insertAdjacentHTML / innerHTML

Дальше решать вам

[Ibishka]

Шохрух Шаймардонов, Но appendChild устарел лучше append не так ли?

[Шохрух Шаймардонов]

Ibishka, аппендЧайлд не устарел. Он еще лет 5 точно будет свою работу шустро выполнять. А про отличия аппенд от аппендЧайлд написано в 1м абзаце тут