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

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

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

Для создания нового HTML-элемента используется метод u('<tag>'). Аргументом передается строка с названием тега. Если нужно создать элемент с содержимым, можно указать HTML-код внутри строки.

let div = u('<div>'); // создаёт пустой div
let paragraph = u('<p>Hello World</p>'); // создаёт p с текстом

Созданный элемент не появляется на странице до тех пор, пока его не вставят в DOM с помощью методов вставки.

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

Методы .text() и .html() позволяют задавать содержимое элемента.

let span = u('<span>');
span.text('Текст через text()'); // добавляет текст
span.html('<strong>Текст через html()</strong>'); // добавляет HTML-контент

Отличие методов:

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

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

После создания элемента его можно добавить в существующий DOM с помощью методов: .append(), .prepend(), .before(), .after().

let div = u('<div>Новый блок</div>');

// Вставка в конец контейнера
u('#container').append(div);

// Вставка в начало контейнера
u('#container').prepend(div);

// Вставка перед существующим элементом
u('#reference').before(div);

// Вставка после существующего элемента
u('#reference').after(div);

Особенности работы с коллекциями: Если метод вызывается на коллекции элементов, новый элемент добавляется в каждый из них.

Создание элементов с атрибутами

Для задания атрибутов используется метод .attr(). Атрибуты можно устанавливать как по отдельности, так и в виде объекта.

let link = u('<a>')
  .attr('href', 'https://example.com')
  .attr('target', '_blank');

let button = u('<button>')
  .attr({
    type: 'button',
    class: 'btn btn-primary'
  });

Метод .attr() также позволяет читать значения атрибутов, если передан только ключ:

let href = link.attr('href'); // 'https://example.com'

Работа с классами и стилями

Методы .addClass(), .removeClass(), .toggleClass() и .css() обеспечивают управление стилями и классами новых элементов.

let card = u('<div>')
  .addClass('card')
  .css({
    width: '200px',
    height: '100px',
    backgroundColor: 'lightblue'
  });

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

Umbrella JS позволяет создавать сложные структуры элементов с помощью цепочек методов и метода .append().

let container = u('<div>').addClass('container');
let header = u('<h1>').text('Заголовок');
let content = u('<p>').text('Содержимое абзаца');

container.append(header).append(content);
u('body').append(container);

Результат: в body вставляется блок с заголовком и абзацем.

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

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

let original = u('<div>Оригинал</div>');
let copy = original.clone();
u('body').append(copy);

Можно клонировать элемент и вставить несколько раз, что удобно для повторяющихся компонентов интерфейса.

Управление событиями при создании элементов

Umbrella JS поддерживает назначение событий на вновь созданные элементы сразу после их создания.

let button = u('<button>Нажми меня</button>');
button.on('click', () => alert('Кнопка нажата'));
u('body').append(button);

Можно комбинировать создание, стилизацию, вставку и назначение событий в цепочку вызовов.

Динамическая генерация списков и таблиц

Создание элементов особенно удобно при работе с массивами данных.

let fruits = ['Яблоко', 'Банан', 'Вишня'];
let ul = u('<ul>');

fruits.forEach(fruit => {
  let li = u('<li>').text(fruit);
  ul.append(li);
});

u('body').append(ul);

Аналогично можно строить таблицы с помощью u('<table>'), u('<tr>'), u('<td>') и вставлять строки динамически.

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

Создание и манипуляция DOM через Umbrella JS оптимизированы для простых сценариев. Для массового создания сотен элементов рекомендуется сначала собрать элементы в DocumentFragment, а затем вставлять их в DOM, чтобы снизить количество перерисовок.

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let div = u('<div>').text(`Элемент ${i}`);
  fragment.appendChild(div[0]);
}
u('body').append(fragment);

Использование DocumentFragment совместимо с методами Umbrella JS, так как элементы можно передавать как нативные DOM-узлы через индекс [0].

Итоговое преимущество

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

Оглавление