Методы .before() and .after()

Методы .before() и .after() в Umbrella JS предназначены для вставки элементов в DOM относительно выбранных элементов. Они обеспечивают удобный и лаконичный способ манипуляции структурой HTML без необходимости использования громоздких нативных методов вроде insertBefore или appendChild.

Метод .before()

Метод .before() вставляет содержимое перед каждым элементом из текущего набора элементов.

Синтаксис:

u(selector).before(content);

Параметры:

  • content — строка с HTML, DOM-элемент, объект Umbrella или массив DOM-элементов.

Особенности работы:

  • Если передан HTML-код, он будет разобран и вставлен в DOM перед выбранными элементами.
  • При передаче DOM-элемента он будет перемещён из текущего места в новый, то есть не клонируется.
  • При передаче объекта Umbrella происходит вставка всех элементов из этого объекта перед каждым выбранным элементом.

Примеры:

// Вставка HTML перед всеми абзацами
u('p').before('<div class="notice">Внимание!</div>');

// Перемещение существующего элемента
var banner = document.querySelector('#banner');
u('p').before(banner);

// Вставка элементов Umbrella
var items = u('.item-to-insert');
u('.container p').before(items);

Особенности многократной вставки: Если content содержит несколько элементов, все они будут вставлены в том же порядке перед каждым выбранным элементом.

Метод .after()

Метод .after() работает аналогично .before(), но вставляет содержимое после каждого элемента из набора.

Синтаксис:

u(selector).after(content);

Параметры:

  • Совпадают с .before(): HTML-строка, DOM-элемент, объект Umbrella, массив элементов.

Примеры:

// Добавление HTML после всех заголовков h2
u('h2').after('<hr>');

// Перемещение существующего блока
var footer = document.querySelector('#footer');
u('article').after(footer);

// Вставка элементов Umbrella после каждого абзаца
var newItems = u('.new-items');
u('p').after(newItems);

Особенности многократной вставки:

  • При вставке нескольких элементов они добавляются в указанном порядке после каждого выбранного элемента.
  • DOM-элементы физически перемещаются, что позволяет избежать дублирования элементов в дереве.

Отличия .before() и .after() от нативных методов

  1. Сокращённый синтаксис Не требуется указывать родителя и метод insertBefore/appendChild.

  2. Поддержка множества элементов Можно сразу работать с набором элементов Umbrella и вставлять содержимое перед всеми или после всех выбранных.

  3. Удобство передачи HTML Не нужно вручную создавать элементы через createElement и innerHTML.

  4. Интеграция с цепочками методов .before() и .after() возвращают исходный объект Umbrella, что позволяет продолжать цепочку вызовов:

u('p').after('<span>Новое</span>').addClass('highlighted');

Важные нюансы использования

  • Перемещение элементов: если элемент уже присутствует в DOM, он будет перемещён, а не скопирован. Для клонирования нужно использовать .clone().
var original = u('#box');
u('p').before(original.clone());

  • Вставка нескольких элементов: порядок элементов в content сохраняется при вставке перед каждым выбранным элементом.

  • Работа с пустыми селекторами: если выборка пустая, методы .before() и .after() не вызывают ошибок — код безопасно игнорируется.

  • HTML-код как строка: строки автоматически разбираются в элементы DOM и вставляются корректно, включая вложенные элементы.

Практические примеры

Вставка уведомлений перед всеми заголовками:

u('h1, h2').before('<div class="alert">Обновление доступно</div>');

Добавление иконки после ссылок:

u('a').after('<i class="icon-link"></i>');

Комбинированное использование с методами Umbrella:

u('.card').before('<div class="spacer"></div>').addClass('highlight');

Динамическое перемещение блока в начало статьи:

var promo = u('#promo');
u('article p:first-child').before(promo);

Методы .before() и .after() позволяют гибко управлять структурой документа, экономят время при работе с DOM и органично интегрируются в цепочки вызовов Umbrella JS, обеспечивая лаконичность и читаемость кода.

Оглавление