insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) разбирает строку как HTML и вставляет полученные узлы в заданную позицию относительно элемента, не затрагивая существующее содержимое.

Зачем нужно

В отличие от innerHTML +=, метод не перестраивает всё поддерево элемента и не сбрасывает обработчики событий на дочерних узлах. Это делает его эффективнее для вставки HTML-фрагментов рядом с элементом или внутри него.

Где используется

  • Добавление HTML-блоков в конец или начало контейнера
  • Вставка уведомлений, тостов, строк таблицы
  • Создание сложной разметки из шаблонной строки

Позиции вставки

'beforebegin'  — перед самим element (как предыдущий сиблинг)
'afterbegin'   — внутри element, перед первым дочерним
'beforeend'    — внутри element, после последнего дочернего
'afterend'     — после самого element (как следующий сиблинг)

<!-- beforebegin -->
<div id="target">
  <!-- afterbegin -->
  Содержимое
  <!-- beforeend -->
</div>
<!-- afterend -->

Примеры

const container = document.querySelector('.list');

// Добавить в конец контейнера
container.insertAdjacentHTML('beforeend', '<li class="item">Новый пункт</li>');

// Добавить в начало
container.insertAdjacentHTML('afterbegin', '<li class="item item--first">Первый</li>');

// Вставить перед контейнером
container.insertAdjacentHTML('beforebegin', '<h2>Список задач</h2>');

// Вставить после контейнера
container.insertAdjacentHTML('afterend', '<p>Конец списка</p>');

Рендер карточек из данных

function renderCards(products) {
  const container = document.querySelector('.products');
  container.innerHTML = ''; // очистить

  products.forEach(p => {
    container.insertAdjacentHTML('beforeend', `
      <div class="card" data-id="${p.id}">
        <h3 class="card__title">${escapeHtml(p.name)}</h3>
        <p class="card__price">${p.price} ₽</p>
        <button class="card__btn">В корзину</button>
      </div>
    `);
  });
}

// Вспомогательная функция для защиты от XSS
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

Уведомления (toast)

function showToast(message, type = 'info') {
  document.body.insertAdjacentHTML('beforeend', `
    <div class="toast toast--${type}" role="alert">
      ${escapeHtml(message)}
    </div>
  `);

  const toast = document.body.lastElementChild;
  setTimeout( => toast.remove(), 3000);
}

showToast('Сохранено успешно!', 'success');
showToast('Ошибка сети', 'error');

Частые ошибки

  • XSS при вставке пользовательских данных — insertAdjacentHTML разбирает HTML; никогда не вставляйте в строку неэкранированный пользовательский ввод.
  • Путать beforeend и afterend — beforeend — внутри элемента, afterend — после элемента.
  • Вызов на <html> или <body> с позициями beforebegin/afterend — эти позиции недопустимы для корневых элементов.

Связанные темы

Ресурсы