Перемещение элементов

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

Вставка элементов

Cash предоставляет несколько методов для вставки элементов в DOM:

  • append() — добавляет содержимое в конец выбранного элемента.

    const div = $('<div>Новый элемент</div>');
$('#container').append(div);

    В этом примере <div> будет добавлен внутрь элемента с идентификатором container после всех его дочерних элементов.

  • prepend() — вставляет содержимое в начало выбранного элемента.

    $('#container').prepend('<p>Первый абзац</p>');

    Новый абзац окажется перед всеми остальными дочерними элементами контейнера.

  • after() — добавляет элемент сразу после выбранного.

    $('<span>Примечание</span>').insertAfter('#target');

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

  • before() — вставляет элемент сразу перед выбранным.

    $('<span>Вставка перед</span>').insertBefore('#target');

Каждый из этих методов может принимать строку HTML, DOM-элемент или другой Cash-объект. Методы возвращают Cash-коллекцию, что позволяет использовать цепочки вызовов.

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

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

Пример:

const item = $('#item');
$('#new-container').append(item);

Элемент #item будет удалён из старого контейнера и добавлен в #new-container. Это изменение структуры DOM без дублирования.

Клонирование элементов

Иногда требуется сохранить оригинал и создать его копию. Для этого используется метод clone():

const clone = $('#original').clone();
$('#container').append(clone);

По умолчанию clone() создаёт копию только самого элемента. Чтобы скопировать всё содержимое, включая события, можно передать параметр true:

const cloneWithEvents = $('#original').clone(true);

Удаление и извлечение элементов

  • remove() — удаляет элементы из DOM полностью.

    $('.old-item').remove();

  • detach() — аналогично remove(), но сохраняет связанные события и данные для возможного повторного использования.

    const saved = $('.old-item').detach();
$('#new-container').append(saved);

Использование detach() удобно при временном переносе элементов или при динамическом перестроении интерфейса без потери привязанных обработчиков.

Работа с родителями и потомками

Cash позволяет легко управлять позиционированием через методы appendTo() и prependTo(), которые действуют как зеркальные отражения append() и prepend():

$('<div>Элемент</div>').appendTo('#container');

Этот вызов создаёт новый <div> и добавляет его в #container.

Также доступны методы children(), parent(), siblings(), которые помогают ориентироваться в структуре DOM при перемещении элементов:

$('#item').parent().append('<p>Новый элемент у родителя</p>');

Цепочные операции

Все методы вставки и перемещения возвращают Cash-объект, что позволяет создавать цепочки вызовов для сложных операций:

$('#item')
  .detach()
  .appendTo('#new-container')
  .after('<p>Соседний элемент</p>');

Эта цепочка последовательно:

  1. Удаляет элемент #item из DOM, сохраняя события.
  2. Добавляет его в новый контейнер.
  3. Вставляет новый абзац сразу после перемещённого элемента.

Стили и позиции при перемещении

Хотя Cash в первую очередь работает с DOM, перемещая элементы, часто нужно учитывать визуальное отображение:

  • Элементы могут менять контекст отображения (например, из-за position: absolute).
  • Каскадные стили (CSS) сохраняются при клонировании.
  • При динамическом перемещении с сохранением событий лучше использовать detach().
const item = $('#floating');
item.detach().appendTo('#new-container').css({
  top: '50px',
  left: '100px'
});

Итоговые рекомендации по перемещению элементов

  • Для простого добавления элементов внутрь контейнера — использовать append() и prepend().
  • Для вставки рядом с элементом — after() и before().
  • Для переноса существующих элементов без дублирования — append() или prepend() с существующим узлом.
  • Для клонирования с сохранением событий — clone(true).
  • Для временного перемещения с сохранением обработчиков — detach().

Эти инструменты позволяют эффективно управлять DOM-структурой и создавать динамические интерфейсы с минимальной нагрузкой и компактным кодом.

Оглавление