Замена элементов

Umbrella JS предоставляет удобные методы для работы с DOM, включая замену элементов и управление их содержимым. Основные функции для замены связаны с методами .replaceWith(), .html(), .append(), .prepend() и их вариациями. Эти методы позволяют динамически изменять структуру страницы без прямой работы с нативным DOM через document.createElement или innerHTML.

Метод .replaceWith()

Метод .replaceWith() полностью заменяет выбранные элементы новым содержимым. В качестве аргумента можно передавать HTML-строку, DOM-элемент или объект Umbrella JS.

u('.old-element').replaceWith('<div class="new-element">Новый контент</div>');
  • HTML-строка: создается новый элемент из строки и вставляется вместо выбранного.
  • DOM-элемент: существующий элемент из документа перемещается в новую позицию.
  • Umbrella-объект: выбранные элементы заменяются элементами из объекта Umbrella.
let newElem = document.createElement('p');
newElem.textContent = 'Текст нового параграфа';
u('.old-element').replaceWith(newElem);

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

let newElem = document.createElement('div');
newElem.textContent = 'Контент';
u('.items').each(function(el) {
    u(el).replaceWith(newElem.cloneNode(true));
});

Замена содержимого с .html()

Метод .html() позволяет полностью заменить внутренний HTML выбранных элементов. Это удобный способ изменить содержимое без удаления самого элемента из DOM.

u('.container').html('<span>Новый контент</span>');

Особенности:

  • Если передана строка, она интерпретируется как HTML.
  • Без аргумента метод возвращает текущий HTML первого элемента.
  • Для обновления нескольких элементов можно передавать одну строку: она будет установлена для всех выбранных элементов.

Добавление элементов через .append() и .prepend()

Методы .append() и .prepend() добавляют новые элементы внутрь выбранного элемента, соответственно в конец или начало содержимого.

u('.list').append('<li>Новый элемент</li>');
u('.list').prepend('<li>Первый элемент</li>');

Можно передавать:

  • HTML-строки
  • DOM-элементы
  • Umbrella-объекты

При добавлении DOM-элемента он перемещается, а не клонируется, если нужно вставить несколько копий — используется cloneNode(true).

let item = document.createElement('li');
item.textContent = 'Элемент';
u('.list').append(item.cloneNode(true));
u('.list').append(item.cloneNode(true));

Вставка элементов вокруг выбранного узла

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

u('.item').before('<div class="before">До элемента</div>');
u('.item').after('<div class="after">После элемента</div>');

Разница с .append() и .prepend():

  • .before() и .after() вставляют элементы на том же уровне DOM, где находится выбранный элемент.
  • .append() и .prepend() вставляют элементы внутрь выбранного элемента.

Комбинированные операции с клонированием

Если требуется заменить или добавить элементы многократно, особенно с DOM-узлами, важно использовать клонирование:

let template = document.createElement('div');
template.textContent = 'Шаблон';

u('.placeholders').each(function(el) {
    u(el).replaceWith(template.cloneNode(true));
});

Это предотвращает удаление оригинального элемента при первой вставке и позволяет корректно обновить несколько узлов.

Работа с множественными элементами

Все методы Umbrella JS работают с коллекциями элементов, что позволяет выполнять замену и вставку в цикле за одну команду. Если передается HTML-строка или Umbrella-объект, он дублируется для всех элементов коллекции:

u('.boxes').replaceWith('<div class="new-box">Новый блок</div>');

Каждый .boxes будет заменен на отдельный новый блок. При использовании DOM-элемента нужно заранее клонировать, как показано выше.

Практические советы

  • Для динамической подстановки контента лучше использовать .replaceWith() с HTML-строкой или Umbrella-объектом.
  • При многократном использовании одного DOM-элемента — всегда клонировать.
  • .html() безопаснее для изменения внутреннего содержимого, если нет необходимости заменять сам элемент.
  • Методы .before() и .after() удобны для вставки соседних блоков без разрушения текущей структуры.

Эти методы делают Umbrella JS гибким инструментом для замены элементов и динамического управления DOM, позволяя писать лаконичный и читаемый код без лишней работы с низкоуровневым API.

Оглавление