append, prepend, before, after

Современные DOM-методы для вставки узлов и текста относительно элемента: append/prepend добавляют внутрь, before/after — снаружи, рядом с элементом.

Зачем нужно

До появления этих методов (ES2015+) приходилось использовать многословные appendChild, insertBefore и создавать текстовые узлы вручную. Новые методы принимают как Node, так и строки напрямую, что делает код чище и лаконичнее. Они существенно упрощают динамическое построение DOM.

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

  • Динамическое добавление элементов списка, карточек, строк таблицы
  • Вставка уведомлений, тостов и модальных окон
  • Добавление элементов до или после конкретного узла без обращения к родителю

Сравнение методов

Метод Куда вставляет
el.append(...) В конец el (после последнего дочернего узла)
el.prepend(...) В начало el (перед первым дочерним узлом)
el.before(...) Перед el (как предыдущий сиблинг)
el.after(...) После el (как следующий сиблинг)

Примеры

append и prepend

const ul = document.querySelector('ul');

// Добавить элемент в конец списка
const li = document.createElement('li');
li.textContent = 'Новый пункт';
ul.append(li);

// Добавить текст + элемент сразу
ul.append('Просто текст', document.createElement('li'));

// Добавить в начало
const first = document.createElement('li');
first.textContent = 'Первый пункт';
ul.prepend(first);

before и after

const divider = document.querySelector('.divider');

// Вставить заголовок перед разделителем
const heading = document.createElement('h2');
heading.textContent = 'Раздел';
divider.before(heading);

// Вставить подпись после разделителя
divider.after('Конец раздела');

Сравнение с устаревшим кодом

// Старый способ
const li = document.createElement('li');
li.textContent = 'Пункт';
ul.appendChild(li);

// Новый способ (эквивалент)
ul.append(li);

// Старый способ вставки перед элементом
parent.insertBefore(newEl, refEl);

// Новый способ
refEl.before(newEl);

Перемещение существующего элемента

// Если передать уже существующий узел, он переместится
const item = document.getElementById('item');
document.querySelector('.other-list').append(item);
// item теперь находится в .other-list, а не на старом месте

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

  • Смешение с innerHTML — append безопасен к XSS при передаче строк (вставляет как текст, а не HTML); если нужен HTML — используйте insertAdjacentHTML.
  • Ожидание, что строка будет HTML — ul.append('<li>Текст</li>') вставит литеральную строку, а не элемент <li>; для HTML применяйте insertAdjacentHTML.
  • Отсутствие поддержки в очень старых браузерах — методы недоступны в IE11 без полифилла.

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

Ресурсы