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

В ядре JavaScript-библиотеки 1С-Битрикс у функции BX.create особая роль, это универсальный конструктор DOM-узлов, который за один вызов позволяет:

• задать тэг,
• назначить свойства props и атрибуты attrs
• навесить CSS-стили style
• описать dataset
• подключить обработчики событий events
• вставить дочерние элементы, или текст/HTML-содержимое

// Короткая форма
DOMNode BX.create(tag [, data [, context]]);
//Расширенная форма — вся конфигурация в одном объекте
DOMNode BX.create(data [, context]);

• tag строка с tagName узла, если он не указан, свойство tag обязательно должно присутствовать в объекте data
• data описательный объект
• context DOM-контекст например, iframe.contentDocument, внутри которого создаётся элемент. По умолчанию document

Объект data, поля и особенности

Текстовое поле только для чтения

const readonlyInput = BX.create('input', {
    attrs: { readonly: 'readonly', placeholder: 'Только для чтения' },
    props: { className: 'form-control' }
});

Кнопка с событием

function onComplete() {
    console.log('Клик по', BX.proxy_context); // BX.proxy_context → текущий элемент
}
const completeBtn = BX.create('span', {
    attrs: { title: 'Завершить задачу' },
    props: { className: 'task-view-button' },
    dataset: { taskId: 123 },
    text: 'Завершить',
    events: { click: BX.proxy(onComplete, this) }
});

Составная форма, построение целой формы на лету

const popupFields = BX.create({
    tag: 'div',
    props: { className: 'formFieldsContainer' },
    children: [
        BX.create({
            tag: 'div',
            props: { className: 'form-group' },
            children: [
                BX.create({
                    tag: 'label',
                    attrs: { for: 'reviewName' },
                    text: 'Ваше имя'
                }),
                BX.create({
                    tag: 'input',
                    attrs: {
                        id: 'reviewName',
                        type: 'text',
                        placeholder: 'Ваше имя',
                        name: 'reviewName'
                    },
                    props: { className: 'form-control' }
                })
            ]
        }),
        BX.create({
            tag: 'div',
            props: { className: 'form-group' },
            children: [
                BX.create({
                    tag: 'label',
                    attrs: { for: 'reviewSite' },
                    text: 'Адрес сайта'
                }),
                BX.create({
                    tag: 'input',
                    attrs: {
                        id: 'reviewSite',
                        name: 'reviewSite',
                        type: 'text',
                        placeholder: 'Адрес сайта'
                    },
                    props: { className: 'form-control' }
                })
            ]
        }),
        BX.create({
            tag: 'div',
            props: { className: 'form-group' },
            children: [
                BX.create({
                    tag: 'label',
                    attrs: { for: 'reviewText' },
                    text: 'Ваш отзыв'
                }),
                BX.create({
                    tag: 'textarea',
                    attrs: {
                        id: 'reviewText',
                        name: 'reviewText',
                        rows: 3
                    },
                    props: { className: 'form-control' }
                })
            ]
        })
    ]
});

Вставка в документ

// «container» — id существующего блока
BX.append(popupFields, BX('container'));

Работа с context

Если нужно строить DOM-элементы внутри iframe передаём второй/третий параметр:

const iframeDoc = BX('reportFrame').contentDocument;
const reportBtn  = BX.create('button', {
    text: 'Сформировать',
    props: { className: 'btn btn-success' }
}, iframeDoc);
BX.append(reportBtn, iframeDoc.body);