Добавление элементов в DOM

Bliss.js — это легковесная библиотека для работы с DOM, которая упрощает создание, вставку и манипулирование элементами в документе. Основные возможности библиотеки позволяют создавать элементы, добавлять их в существующую структуру и управлять их свойствами и событиями с минимальным количеством кода.

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

Для создания элементов в Bliss.js используется функция $.create(tag, [props], [children]).

Параметры:

  • tag — строка с именем HTML-тега (div, span, ul и т.д.).
  • props — объект с атрибутами, свойствами и обработчиками событий.
  • children — массив дочерних элементов или строки, которые будут вставлены внутрь создаваемого элемента.

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

var box = $.create('div', { className: 'box' }, 'Содержимое блока');
document.body.appendChild(box);

В этом примере создаётся <div> с классом box и текстовым содержимым, который добавляется в body.

Добавление элементов в DOM

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

  • el.appendChild(child) — добавление в конец элемента.
  • el.prependChild(child) — добавление в начало элемента.
  • el.before(child) — вставка перед элементом.
  • el.after(child) — вставка после элемента.

Пример добавления нескольких элементов:

var list = $.create('ul', { id: 'menu' });
var items = ['Главная', 'О нас', 'Контакты'].map(function(text) {
    return $.create('li', {}, text);
});

items.forEach(function(item) {
    list.appendChild(item);
});

document.body.appendChild(list);

Здесь создаётся список <ul> с тремя <li> элементами, добавленными через метод appendChild.

Работа с вложенными элементами

Bliss.js позволяет создавать сложные структуры элементов в одной операции. Использование вложенных массивов упрощает добавление дочерних элементов:

var card = $.create('div', { className: 'card' }, [
    $.create('h2', {}, 'Заголовок карточки'),
    $.create('p', {}, 'Описание карточки'),
    $.create('button', { onclick: function() { alert('Кнопка нажата'); } }, 'Кнопка')
]);

document.body.appendChild(card);

В этом примере создаётся карточка с заголовком, текстом и кнопкой с обработчиком события.

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

Созданные элементы можно сразу настраивать через объект props:

  • className — задаёт класс элемента.
  • id — идентификатор.
  • style — объект со стилями.
  • События, например onclick, onmouseover.

Пример с настройкой стилей и событий:

var btn = $.create('button', {
    id: 'saveBtn',
    className: 'btn primary',
    style: { backgroundColor: 'green', color: 'white', padding: '10px' },
    onclick: function() {
        console.log('Сохранение выполнено');
    }
}, 'Сохранить');

document.body.appendChild(btn);

Вставка HTML-контента

Bliss.js позволяет использовать строки с HTML, но рекомендуется комбинировать с методами создания элементов для безопасности:

var container = $.create('div', {}, [
    $.create('p', {}, 'Текст параграфа'),
    $.create('div', { innerHTML: '<strong>Жирный текст</strong>' })
]);

document.body.appendChild(container);

Использование innerHTML удобно для вставки разметки, но требует осторожности при работе с пользовательскими данными.

Вставка элементов перед и после существующих

Методы before и after обеспечивают гибкое позиционирование новых узлов:

var first = document.querySelector('#first');
var newEl = $.create('div', { className: 'highlight' }, 'Новый блок');

first.before(newEl); // вставка перед #first
first.after(newEl.cloneNode(true)); // вставка после #first

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

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

Для эффективного добавления больших наборов элементов рекомендуется использовать document.createDocumentFragment() через Bliss.js:

var fragment = document.createDocumentFragment();
['Пункт 1', 'Пункт 2', 'Пункт 3'].forEach(function(text) {
    fragment.appendChild($.create('li', {}, text));
});

var list = $.create('ul', {});
list.appendChild(fragment);
document.body.appendChild(list);

Фрагменты позволяют вставлять множество элементов за одну операцию, что снижает количество перерисовок страницы и повышает производительность.

Итоговая структура методов

  • Создание: $.create(tag, props, children)
  • Добавление внутрь: appendChild, prependChild
  • Добавление вокруг: before, after
  • Настройка атрибутов и стилей: объект props
  • Обработка событий: через props (onclick, onmouseover)
  • Использование фрагментов: document.createDocumentFragment()

Bliss.js объединяет эти возможности в лаконичный и читаемый синтаксис, позволяя управлять DOM без громоздких вызовов стандартного API и дополнительных библиотек.

Оглавление