Создание новых элементов через $.create()

Библиотека Bliss.js предоставляет удобный способ динамического создания DOM-элементов с помощью метода $.create(). Этот метод объединяет функциональность создания элементов, добавления атрибутов, классов и вложенного контента в один компактный вызов.

Синтаксис

$.create(tagName, options)

  • tagName — строка с именем создаваемого элемента ('div', 'span', 'ul' и т. д.).

  • options — объект с настройками элемента, включающий:

    • className или class — строка или массив строк, задающие классы элемента.
    • id — идентификатор элемента.
    • attributes — объект, где ключи — имена атрибутов, значения — их значения.
    • text — текстовое содержимое элемента.
    • html — HTML-контент элемента.
    • children — массив вложенных элементов, созданных через $.create() или существующих DOM-узлов.
    • events — объект с событиями, где ключ — название события, значение — обработчик.

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

Создание простого div с текстом:

const div = $.create('div', { text: 'Привет, Bliss.js!' });
document.body.appendChild(div);

Создание элемента с классами и id:

const box = $.create('div', {
    id: 'my-box',
    class: ['container', 'highlight'],
    text: 'Контейнер с классами'
});
document.body.appendChild(box);

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

const link = $.create('a', {
    text: 'Перейти на сайт',
    attributes: {
        href: 'https://example.com',
        target: '_blank',
        rel: 'noopener'
    }
});
document.body.appendChild(link);

Вложенные элементы через children

children позволяет создавать сложные структуры DOM без дополнительных вызовов appendChild.

const list = $.create('ul', {
    class: 'menu',
    children: [
        $.create('li', { text: 'Главная' }),
        $.create('li', { text: 'О нас' }),
        $.create('li', { text: 'Контакты' })
    ]
});
document.body.appendChild(list);

Такой подход уменьшает количество кода и повышает читаемость при создании вложенных структур.

Добавление событий

$.create() поддерживает назначение событий прямо при создании элемента через объект events.

const button = $.create('button', {
    text: 'Нажми меня',
    events: {
        click: () => alert('Кнопка нажата'),
        mouseenter: (e) => e.target.style.backgroundColor = 'lightblue',
        mouseleave: (e) => e.target.style.backgroundColor = ''
    }
});
document.body.appendChild(button);

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

Использование HTML-контента

В отличие от text, свойство html позволяет добавлять разметку:

const container = $.create('div', {
    html: '<strong>Жирный текст</strong> и обычный текст'
});
document.body.appendChild(container);

Важно помнить, что использование html напрямую вставляет HTML-код, поэтому при работе с пользовательским вводом следует избегать уязвимостей XSS.

Смешанное использование text и children

Если одновременно указаны text и children, Bliss.js добавляет текст в начало элемента, а потом вставляет все дочерние элементы:

const card = $.create('div', {
    text: 'Карточка:',
    class: 'card',
    children: [
        $.create('p', { text: 'Описание карточки' }),
        $.create('button', { text: 'Подробнее' })
    ]
});
document.body.appendChild(card);

Динамическое создание через функции

Часто $.create() используется внутри функций для генерации контента на основе данных:

const users = [
    { name: 'Алексей', age: 30 },
    { name: 'Мария', age: 25 }
];

const userList = $.create('ul', {
    children: users.map(user =>
        $.create('li', { text: `${user.name}, ${user.age} лет` })
    )
});
document.body.appendChild(userList);

Это делает код декларативным и удобным для работы с массивами данных.

Советы по использованию

  • Для элементов с большим количеством вложенных узлов удобнее использовать children, чем многократные appendChild.
  • Свойство attributes предпочтительнее для нестандартных атрибутов (data-*, aria-*).
  • Если нужно просто добавить текст, text безопаснее, чем html, так как автоматически экранирует символы.
  • События через events обеспечивают чистый и компактный синтаксис без разрыва логики создания элемента и назначения обработчиков.

$.create() — центральный инструмент Bliss.js для декларативного создания DOM, позволяющий объединить структуру, стили, атрибуты и события в одном объекте. Он особенно полезен при динамическом формировании интерфейсов и компонентов.

Оглавление