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

Создание новых элементов в Cash-JS основано на лаконичном синтаксисе и строгом контроле над деревом DOM. Библиотека предоставляет минималистичный, но выразительный API, напоминающий jQuery, позволяя быстро генерировать структуру интерфейса и интегрировать её в существующий документ без избыточного кода.

Cash принимает HTML-строку и преобразует её в набор узлов:

const item = $('<li class="menu-item">Профиль</li>');

Полученный объект является коллекцией элементов, что позволяет сразу выполнять цепочки вызовов: назначать атрибуты, классы, обработчики событий и внедрять в DOM.

Создание сложных фрагментов

HTML-строка может содержать вложенные структуры:

const card = $(`
  <div class="card">
    <h2 class="card-title">Уведомления</h2>
    <p class="card-text">Нет новых сообщений</p>
  </div>
`);

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

Сочетание генерации и атрибутов

Cash поддерживает удобные методы для задания свойств и атрибутов сразу после создания:

const input = $('<input>')
  .attr('type', 'text')
  .attr('placeholder', 'Поиск')
  .addClass('search-input');

Такой подход уменьшает количество строк и устраняет необходимость явного обращения к DOM API.

Динамическое формирование разметки

Благодаря компактности синтаксиса удобно собирать элементы на основе данных:

const users = ['Анна', 'Павел', 'Юлия'];

const list = $('<ul class="users-list">');

users.forEach(name => {
  list.append($(`<li class="users-item">${name}</li>`));
});

Cash при каждом append корректно перемещает узлы, поддерживая вложенные вставки и сохраняя порядок.

Использование шаблонов и фрагментов

При построении интерфейса фрагментами следует учитывать, что Cash не создаёт промежуточных DocumentFragment, как это делает нативный DOM при использовании innerHTML, но за счёт минимального лага при парсинге HTML-строки достигается сопоставимая производительность. Генерация небольших компонентных блоков остаётся предпочтительной, особенно при повторных вставках.

Манипуляции с жёстко типизированными элементами

Иногда HTML-строка не подходит, например, при создании медиа-элементов или формовых узлов с контролем natively-only свойств. Cash допускает создание элементов через нативный DOM, а затем оборачивание:

const video = $(document.createElement('video'))
  .attr('controls', true)
  .attr('src', '/media/intro.mp4')
  .addClass('player');

Данный метод снижает риск ошибок парсинга и сохраняет гибкость.

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

Генерация новых узлов сама по себе не изменяет документ. Коллекция существует в памяти до момента явного добавления с помощью append, prepend, before, after или replaceWith. Это позволяет собирать интерфейсные блоки заранее и внедрять в нужных местах по мере необходимости.

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

Клонирование перед вставкой

Для интерфейсов, требующих множественных экземпляров одного шаблона, рекомендуется клонирование:

const template = $('<button class="tag"></button>');

['CSS', 'JS', 'HTML'].forEach(tag => {
  $('.tags').append(template.clone().text(tag));
});

Каждый вызов clone создаёт независимый экземпляр, сохраняя классы, атрибуты и содержимое.

Управление контентом и текстом

Для элементов, созданных из пустой строки или шаблона, используется text или html:

const row = $('<div class="row">');
row.html('<strong>Город:</strong> Москва');

Метод text безопаснее для данных, так как экранирует HTML:

$('<span>').text('<admin>');

Итерация и операции над коллекциями

Созданные элементы ведут себя как коллекции. Возможно назначение данных, обработчиков событий, а также массовые операции:

const buttons = $(`
  <button class="action">Удалить</button>
  <button class="action">Изменить</button>
`);

buttons.on('click', e => {
  console.log('clicked', e.target);
});

Каждая кнопка получает обработчик без дополнительного кода.

Слияние Cash с шаблонными системами

В рамках компонентного подхода Cash часто используется поверх шаблонных функций. Генерация HTML выполняется в строке или посредством функций, возвращающих Cash-коллекции. Такой подход обеспечивает чистоту разделения данных и представления и упрощает последующие модификации DOM.

Создание новых элементов как базовый строительный блок

Генерация элементов в Cash служит основой для большинства операций: вставки узлов, упаковки интерфейсных компонентов, декларативной сборки списков, карточек и форм. Упор делается на краткость цепочек и предсказуемость манипуляций с DOM, что уменьшает вероятность некорректной модификации дерева документа и облегчает поддержку кода.

Оглавление