Работа с фрагментами документа

Umbrella JS предоставляет удобный и лаконичный API для работы с DOM, позволяя эффективно манипулировать элементами страницы, создавать, изменять и удалять фрагменты документа. Основной объект библиотеки — это коллекция элементов, подобная массиву, которая поддерживает методы для управления узлами DOM.

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

Создание новых элементов в Umbrella JS выполняется через функцию u() с передачей HTML-строки. Пример:

let div = u('<div class="new-element">Привет</div>');

Ключевые моменты:

  • Можно создавать несколько элементов одновременно, передав строку с несколькими тегами.
  • Созданные элементы не вставляются в DOM автоматически — для этого используется метод .appendTo() или .append().

Пример добавления созданного элемента в документ:

div.appendTo('body'); // вставляет div в конец body

Вставка фрагментов

Umbrella JS поддерживает несколько методов для вставки фрагментов в DOM:

  1. append() — добавляет элемент внутрь выбранного узла:
u('ul').append('<li>Новый элемент</li>');
  1. prepend() — добавляет элемент в начало выбранного узла:
u('ul').prepend('<li>Первый элемент</li>');
  1. before() и after() — вставка элементов перед или после выбранного узла:
u('h1').before('<p>Перед заголовком</p>');
u('h1').after('<p>После заголовка</p>');

Все эти методы позволяют вставлять как строки HTML, так и существующие элементы, обёрнутые в u().

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

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

let cloned = u('div.clone-me').clone();
cloned.appendTo('body');

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

  • По умолчанию клонируется только структура и содержимое элемента.
  • Можно передать параметр true, чтобы клонировать и события, привязанные к элементу:
u('button').clone(true).appendTo('#container');

Удаление фрагментов

Удаление элементов выполняется с помощью метода .remove():

u('.old-element').remove();

Метод очищает узел из DOM, но не уничтожает ссылки на него в коде, если они сохранены в переменной.

Для очистки содержимого элемента используется .empty():

u('#content').empty(); // удаляет всех детей элемента

Работа с HTML и текстом

Umbrella JS предоставляет методы для управления содержимым элементов:

  • .html() — получение или установка HTML:
let content = u('#main').html(); // получение
u('#main').html('<p>Новый контент</p>'); // установка
  • .text() — работа с текстовым содержимым без HTML-разметки:
u('#main').text('Простой текст');

Различие между .html() и .text() важно: первый метод вставляет HTML, второй — безопасный текст.

Копирование и вставка фрагментов между элементами

Umbrella JS позволяет легко перемещать элементы внутри DOM. Методы .appendTo() и .prependTo() выполняют вставку текущих элементов внутрь указанных целей:

u('.item').appendTo('#list'); // перемещает элементы .item внутрь #list

Если необходимо оставить исходные элементы, можно использовать .clone() перед вставкой:

u('.item').clone().appendTo('#list');

Работа с шаблонами

Для повторного создания сложных фрагментов удобно использовать HTML-шаблоны:

let template = `
<div class="card">
  <h2>Заголовок</h2>
  <p>Описание</p>
</div>
`;

u('#container').append(template);

Преимущества использования шаблонов:

  • Легко создавать повторяющиеся элементы.
  • Можно комбинировать с .clone() для массовой генерации контента.

Манипуляции с атрибутами и классами

Часто фрагменты документа требуют настройки атрибутов перед вставкой:

u('<button>Нажми меня</button>')
  .attr('id', 'btn1')
  .addClass('btn-primary')
  .appendTo('#controls');

Методы attr(), addClass(), removeClass() и toggleClass() позволяют полностью управлять состоянием нового элемента перед его рендерингом.

Вставка элементов с событиями

События можно привязать как к существующим, так и к создаваемым фрагментам:

u('<button>Кликни</button>')
  .on('click', function() { alert('Нажато'); })
  .appendTo('#buttons');

Использование .clone(true) сохранит привязанные события при копировании элементов.

Итоговая структура работы с фрагментами

  1. Создать элемент — u('<div>...</div>').
  2. Настроить атрибуты и классы — .attr(), .addClass().
  3. Прикрепить события — .on().
  4. Вставить в DOM — .appendTo(), .prependTo(), .before(), .after().
  5. Клонировать при необходимости — .clone().

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

Методы Umbrella JS для работы с фрагментами документа делают библиотеку легкой альтернативой jQuery для базовых и средних задач манипуляции DOM. Они обеспечивают простоту синтаксиса и мощь работы с узлами документа.

Оглавление