Работа с HTML-содержимым

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

Получение и установка HTML

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

// Получение HTML
let content = u('.container').html();

// Установка нового HTML
u('.container').html('<p>Новый контент</p>');
  • При вызове без аргументов возвращается HTML первого элемента из коллекции.
  • При передаче строки HTML всех выбранных элементов заменяется на переданную строку.

Добавление и вставка HTML

Для вставки HTML без удаления существующего содержимого используют методы append() и prepend().

// Добавление HTML в конец элемента
u('.list').append('<li>Новый элемент</li>');

// Добавление HTML в начало элемента
u('.list').prepend('<li>Первый элемент</li>');

Эти методы могут принимать не только строки, но и другие элементы или коллекции Umbrella JS.

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

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

  • before(content) — вставляет HTML перед элементом.
  • after(content) — вставляет HTML после элемента.
u('.item').before('<div class="notice">Важно</div>');
u('.item').after('<div class="note">Примечание</div>');

Такая вставка не удаляет исходный элемент, а лишь добавляет новый блок в нужном месте DOM.

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

Для работы с текстовым содержимым используются методы text():

// Получение текста
let txt = u('.title').text();

// Установка текста
u('.title').text('Заголовок обновлен');

Метод text() автоматически экранирует специальные символы HTML, что предотвращает непреднамеренное создание элементов внутри текстовой строки.

Управление атрибутами и свойствами

Методы attr() и prop() позволяют синхронно управлять атрибутами и свойствами элементов, что тесно связано с изменением их HTML-содержимого.

// Получение атрибута
let value = u('input').attr('value');

// Установка атрибута
u('input').attr('placeholder', 'Введите текст');

// Установка свойства
u('input').prop('checked', true);

Разница между attr и prop важна: attr работает с HTML-атрибутами, prop — с DOM-свойствами.

Удаление и очистка содержимого

Метод empty() очищает все дочерние элементы выбранного блока:

u('.container').empty();

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

u('.ad-banner').remove();

Использование этих методов позволяет управлять структурой HTML без прямого обращения к innerHTML и removeChild.

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

Метод clone() создает глубокую копию выбранных элементов вместе с их содержимым:

let clone = u('.card').clone();
u('.cards-container').append(clone);

Клонированный элемент можно вставлять в любое место DOM, сохраняя все вложенные элементы и их атрибуты.

Динамическое создание элементов

Umbrella JS поддерживает создание новых элементов из строки HTML:

let newDiv = u('<div class="alert">Сообщение</div>');
u('body').append(newDiv);

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

Итоговая структура методов для работы с HTML

Метод Описание
html() Получение или установка HTML содержимого
text() Получение или установка текстового содержимого
append() Добавление HTML в конец элемента
prepend() Добавление HTML в начало элемента
before() Вставка перед элементом
after() Вставка после элемента
empty() Очистка содержимого
remove() Удаление элемента из DOM
clone() Клонирование элемента
attr() Получение/установка атрибутов
prop() Получение/установка DOM-свойств

Эта комбинация методов обеспечивает полную управляемость HTML-содержимым элементов, позволяя строить динамические интерфейсы с минимальным количеством кода.

Оглавление