Как добавить новый узел в DOM?

DOM (Document Object Model) — это древовидное представление HTML-документа, где каждый тег, текст и атрибут является узлом. Чтобы динамически добавить новый узел, нужно создать его в памяти, настроить и затем вставить в существующее дерево. Это основа для интерактивных интерфейсов: подгрузка комментариев, добавление товаров в корзину, отрисовка списков.

Основной способ: createElement + appendChild

Сначала создаём элемент, задаём текст или атрибуты, затем находим родителя и вызываем appendChild. Новый узел добавляется в конец списка детей.

const list = document.querySelector('#list');
const li = document.createElement('li');
li.textContent = 'Новый пункт';
li.classList.add('item');
list.appendChild(li);

Вставка в конкретное место

Если нужно вставить не в конец, а перед определённым элементом, используют insertBefore. Также есть современные методы append, prepend, before, after, replaceWith.

const first = list.firstElementChild;
const li2 = document.createElement('li');
li2.textContent = 'Первый';
list.insertBefore(li2, first);
// или list.prepend(li2);

Альтернативы и предостережения

• innerHTML — быстрый, но перезаписывает всё содержимое и уязвим к XSS при вставке пользовательских данных.
• insertAdjacentHTML — вставляет HTML-строку в позицию (beforebegin, afterbegin, beforeend, afterend), не перезаписывая соседей.
• DocumentFragment — контейнер для пакетной вставки множества узлов за одну операцию, что повышает производительность.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Пункт ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // одна перерисовка

Итог: для безопасного и предсказуемого добавления узлов используйте createElement вместе с appendChild/insertBefore, а для массовых вставок — DocumentFragment. innerHTML применяйте только к доверенному контенту.