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

Библиотека Cash предоставляет удобный и лаконичный API для работы с DOM, аналогичный jQuery, но с меньшим весом и высокой производительностью. Одной из ключевых возможностей является замена элементов на странице, что позволяет динамически управлять структурой документа.

Метод .replaceWith()

Метод .replaceWith() позволяет заменить выбранные элементы новыми. Синтаксис метода:

$(селектор).replaceWith(новыйЭлемент);

Параметры:

  • новыйЭлемент — строка с HTML-кодом, DOM-элемент или функция, возвращающая новый элемент.

Примеры использования:

// Заменяем все параграфы на div с текстом
$('p').replaceWith('<div>Новый элемент</div>');
// Используем функцию для динамической замены
$('p').replaceWith(function(index, oldHtml) {
    return `<div>Элемент ${index}: ${oldHtml}</div>`;
});

В функции доступны два аргумента: index — порядковый номер элемента в наборе, и oldHtml — HTML содержимое исходного элемента.

Замена с использованием DOM-элементов

Можно передавать напрямую DOM-элементы или элементы Cash:

const newElement = document.createElement('span');
newElement.textContent = 'Новый span';
$('p').replaceWith(newElement);

Cash автоматически обработает передачу Node или коллекции узлов, что позволяет интегрировать сторонние элементы без необходимости конвертации в HTML-строку.

Метод .replaceAll()

Метод .replaceAll() — зеркальный аналог .replaceWith(), но позволяет выбрать элементы, которые заменят текущий набор.

$(новыйЭлемент).replaceAll(селектор);

Пример:

$('<div>Замена</div>').replaceAll('p');

В этом случае все элементы p будут заменены на созданный <div>.

Отличия .replaceWith() и .replaceAll()

  • .replaceWith() вызывается на старых элементах и заменяет их.
  • .replaceAll() вызывается на новых элементах и распространяет их на выбранные старые элементы.

Эти методы обеспечивают гибкость при динамическом формировании контента, особенно при работе с шаблонами и компонентами.

Замена с сохранением событий

Cash позволяет сохранять обработчики событий при замене элементов через метод .replaceWith(), если передавать элемент Cash вместо HTML-строки:

const button = $('<button>Клик</button>');
button.on('click', () => alert('Нажато'));
$('p').replaceWith(button);

В этом случае обработчик click не теряется, что важно при создании интерактивных интерфейсов.

Использование в цепочках методов

Методы замены поддерживают цепочку вызовов, что упрощает код и делает его более читаемым:

$('p')
    .replaceWith('<div>Заменено</div>')
    .css('color', 'red')
    .fadeIn();

В примере сначала выполняется замена, затем применение CSS и анимации к новому элементу.

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

  • Для массовой замены элементов с уникальным содержимым лучше использовать функцию в .replaceWith().
  • Для интеграции готовых DOM-элементов или компонентов удобно использовать .replaceWith() с Node или объектом Cash.
  • .replaceAll() хорошо подходит для создания шаблонов, которые нужно «нанести» на множество элементов на странице.

Методы замены элементов в Cash являются мощным инструментом для динамического управления DOM, сочетая лаконичность кода и высокую производительность.

Оглавление