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

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

Выбор целевых элементов

Все операции перемещения начинаются с выбора элементов через функцию $:

const items = $('.item'); // выбирает все элементы с классом 'item'

Dom7 возвращает коллекцию элементов, которая поддерживает цепочки вызовов. Любой метод перемещения применяется к каждому элементу в наборе.

Добавление элементов

append()

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

$('.container').append('<div class="new-item">Новый элемент</div>');

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

  • Можно передавать HTML-строку, DOM-элемент или коллекцию Dom7.
  • Элемент автоматически клонируется, если вставляется в несколько узлов.

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

const item = $('.item-to-move');
$('.container').append(item);

В этом случае элемент item перемещается из старого контейнера в новый.

prepend()

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

$('.container').prepend('<span>Первый элемент</span>');

Использование аналогично append(), только вставка происходит в начало родителя.

Вставка относительно других элементов

before()

Добавляет элемент перед выбранными узлами:

$('.item').before('<div class="before-item">Перед элементом</div>');
  • Принимает строку HTML, DOM-элемент или Dom7.
  • Каждый выбранный элемент получает вставку перед собой.

after()

Добавляет элемент после выбранных узлов:

$('.item').after('<div class="after-item">После элемента</div>');
  • Позволяет динамически расширять список элементов без перестройки всего DOM.

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

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

const movingItem = $('.item-to-move');
$('.target-container').append(movingItem);

Преимущество Dom7 — возможность легко перемещать несколько элементов одновременно:

$('.item-to-move').appendTo('.target-container');

Метод appendTo() является синонимом цепочки $(target).append(element) и делает код более читаемым.

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

replaceWith()

Метод заменяет выбранные элементы на новый узел:

$('.old-item').replaceWith('<div class="new-item">Новый элемент</div>');
  • Старый элемент полностью удаляется из DOM.
  • Можно передавать как HTML-строку, так и существующий элемент Dom7 или DOM.

replaceAll()

Метод вставляет текущие элементы на место других узлов:

$('.new-item').replaceAll('.old-item');

Эффективно для массовой замены нескольких элементов одним или несколькими новыми.

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

remove()

Удаляет выбранные элементы из DOM:

$('.item-to-delete').remove();
  • Можно передавать селектор для фильтрации внутри набора.
  • Все события, связанные с удаляемыми элементами, удаляются автоматически.

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

Для сохранения структуры при перемещении полезно использовать метод clone():

const clonedItem = $('.item').clone();
$('.container').append(clonedItem);
  • clone() поддерживает передачу булевого параметра true, чтобы скопировать и события: clone(true).

Работа с родительскими и дочерними элементами

Dom7 предоставляет методы для поиска и перемещения относительно родителя или потомков:

  • appendTo(target) и prependTo(target) — вставка текущего набора в целевой элемент.
  • wrap(wrapper) — оборачивает каждый выбранный элемент в новый контейнер.
  • unwrap() — удаляет родительский элемент выбранных узлов, оставляя их на месте.

Пример:

$('.item').wrap('<div class="wrapper"></div>');

Каждый элемент .item будет помещен внутрь отдельного .wrapper.

Цепочки и массовые операции

Все методы перемещения поддерживают цепочки:

$('.item')
  .prepend('<span>Начало</span>')
  .append('<span>Конец</span>')
  .wrap('<div class="wrapper"></div>');
  • Позволяет выполнять несколько манипуляций с DOM за один проход.
  • Повышает производительность за счет минимизации операций с реальным DOM.

Особенности производительности

  • Перемещение элементов в Dom7 не создает копий, если явно не используется clone().
  • Методы вставки работают с набором элементов, что сокращает количество обходов DOM.
  • Использование методов append(), prepend(), before(), after() предпочтительнее прямого обращения к innerHTML при динамическом изменении структуры страницы.

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

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

Эти инструменты Dom7 обеспечивают эффективное управление DOM, упрощают динамическое построение интерфейсов и минимизируют ошибки при манипуляциях с узлами.

Оглавление