Append и prepend

Библиотека Unpoly предоставляет удобные методы для динамического обновления содержимого страницы без полной перезагрузки. Среди них ключевую роль играют операции append и prepend, которые позволяют вставлять новые элементы в уже существующую структуру DOM.

Основные концепции

  • Append — добавляет новый контент в конец выбранного контейнера.
  • Prepend — добавляет новый контент в начало выбранного контейнера.

Обе операции работают с HTML, возвращаемым сервером или локально сгенерированным, и выполняются в контексте указанного селектора.

Пример базовой структуры контейнера:

<div id="messages">
  <div class="message">Привет</div>
</div>

Используя append и prepend, новые сообщения можно динамически вставлять в начало или конец списка.

Использование append

Метод up.append() вставляет новый контент в конец выбранного элемента. Синтаксис:

up.append(target, content, options)
  • target — CSS-селектор или DOM-элемент, в который вставляется контент.
  • content — HTML-код, строка, DOM-элемент или AJAX-ответ.
  • options — объект с дополнительными параметрами, например, анимацией или коллбэками.

Пример добавления сообщения в конец списка:

up.append('#messages', '<div class="message">Новое сообщение</div>');

После выполнения в DOM будет:

<div id="messages">
  <div class="message">Привет</div>
  <div class="message">Новое сообщение</div>
</div>

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

  • Можно вставлять несколько элементов сразу, передав массив DOM-элементов или jQuery-подобные объекты.
  • Поддерживаются AJAX-запросы: можно указать URL, откуда будет загружен HTML-контент.
  • Методы append и prepend вызывают события Unpoly, например up:fragment:inserted, что позволяет привязывать скрипты к динамически добавленным элементам.

Использование prepend

Метод up.prepend() вставляет контент в начало контейнера. Синтаксис аналогичен append:

up.prepend(target, content, options)

Пример добавления нового сообщения в начало:

up.prepend('#messages', '<div class="message">Срочное сообщение</div>');

Результат в DOM:

<div id="messages">
  <div class="message">Срочное сообщение</div>
  <div class="message">Привет</div>
</div>

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

  • Сохраняет существующие элементы и вставляет новый контент перед ними.
  • Полезен для лент новостей или уведомлений, где важно отображать новые элементы сверху.
  • Поддерживает все те же опции, что и append: анимации, AJAX, коллбэки.

Работа с AJAX

Unpoly позволяет загружать контент с сервера и автоматически вставлять его с помощью append или prepend. Пример:

up.append('#messages', '/messages/latest', {
  mode: 'append',      // Можно явно указать, хотя append() по умолчанию добавляет в конец
  target: '#messages'
});

Сервер должен возвращать фрагмент HTML:

<div class="message">Новое сообщение с сервера</div>

Unpoly автоматически добавит его в конец указанного контейнера, сохранив интерактивность других элементов.

Анимации и визуальные эффекты

Unpoly поддерживает плавные вставки элементов:

up.append('#messages', '<div class="message">Анимированное сообщение</div>', {
  animation: 'fade-in'
});

Доступные анимации: fade-in, slide-down, highlight. Они облегчают визуальное восприятие обновлений и делают интерфейс более отзывчивым.

Коллбэки и события

При добавлении элементов можно использовать коллбэки для выполнения действий после вставки:

up.prepend('#messages', '<div class="message">Событие</div>', {
  onInserted: function(fragment) {
    console.log('Элемент добавлен:', fragment);
  }
});

События:

  • up:fragment:inserted — вызывается после вставки нового фрагмента.
  • up:fragment:revealed — когда фрагмент становится видимым на странице.

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

Практические рекомендации

  • Для списков сообщений, уведомлений или новостных лент prepend чаще используется для вставки новых элементов сверху, append — для добавления в конец.
  • При работе с AJAX всегда проверять, что сервер возвращает корректный HTML-фрагмент.
  • Сочетание анимаций с append/prepend улучшает UX, особенно при частом обновлении контента.
  • События Unpoly позволяют интегрировать динамически добавленный контент с существующей логикой страницы без повторной инициализации всего DOM.

Итоговая структура вызова

up.append(target, content, {
  animation: 'fade-in',
  onInserted: function(fragment) { /* действия после вставки */ }
});

up.prepend(target, content, {
  animation: 'slide-down',
  onInserted: function(fragment) { /* действия после вставки */ }
});

Методы append и prepend являются основными инструментами Unpoly для динамического обновления интерфейса, обеспечивая простую интеграцию AJAX-контента и удобное управление DOM без перезагрузки страницы.

Оглавление