Создание DOM через BX.create в шаблонах и скриптах Битрикс

Зачем BX.create вместо сырого innerHTML

В админских и фронтовых сценариях ядро отдаёт вспомогательный слой над DOM: BX.create задаёт имя тега, свойства узла и дочерние элементы одним объектом конфигурации. Это удобнее длинных шаблонных строк и снижает риск ошибок при вложенной структуре.

Вложенное дерево с классами и обработчиком

В children передаём массив узлов; у каждого — свой блок props. События задаются объектом events с ключами вида имени события в нижнем регистре DOM.

var myDiv = BX.create('DIV', {
  props: { className: 'my-class-1' },
  children: [
    BX.create('SPAN', {
      props: { className: 'my-class-2' },
      html: 'Text'
    }),
    BX.create('SPAN', {
      props: { className: 'my-class-2' },
      html: 'Text 2',
      events: { click: function () { alert('clicked'); } }
    })
  ]
});

Текст узла без дочерних элементов

BX.create('DIV', { text: 'Text inside' });

Поле ввода одной конфигурацией

BX.create('INPUT', { props: { type: 'text', name: 'city', value: '' } });

Инлайн-стили

Ключи в style — как во встроенном style-объекте; значения — строки для CSS-свойств.

var mySpan = BX.create('SPAN', {
  props: { className: 'my-class' },
  style: { 'margin-left': '10px' }
});

Произвольные атрибуты

var a = BX.create('A', { attrs: { href: '/link/', target: '_blank' } });

Самозакрывающиеся и простые теги

BX.create('BR');

После создания элемент обычно вставляют в документ через appendChild целевого контейнера или API компонента, если вы формируете разметку внутри уже инициализированного блока Битрикс.