BX.create

Описание и параметры

DOMNode 
BX.create(
	tag[,
	data[,
	context]]
);

или

DOMNode 
BX.create(
	data[,
	context]
);

Создание узла DOM-структуры. Допускает при создании узла "подвеску" на него каких-то событий.

Параметры функции

Параметр	Описание
tag	Строка с tagName узла. Если он не указан (первый параметр - объект), то имя тэга должно содержаться в свойстве tag описательного объекта data.
data	Описательный объект, может иметь следующие поля: tag: имя_тэга_узла, props: дополнительные свойства, например, className, style: стили узла, events: обработчики событий узла, attrs: для основных полей, dataset: перечень data-атрибутов, children: массив дочерних узлов, необязательный text: текстовое содержимое узла, html: HTML-содержимое узла Примечание: Параметры text, html и children не совместимы между собой.
context	Ссылка на контекст, в котором должен быть создан узел, необязательный.

Параметр

Описание

tag

Строка с tagName узла. Если он не указан (первый параметр - объект), то имя тэга должно содержаться в свойстве tag описательного объекта data.

data

Описательный объект, может иметь следующие поля:

tag: имя_тэга_узла,
props: дополнительные свойства, например, className,
style: стили узла,
events: обработчики событий узла,
attrs: для основных полей,
dataset: перечень data-атрибутов,
children: массив дочерних узлов, необязательный
text: текстовое содержимое узла,
html: HTML-содержимое узла

Примечание: Параметры text, html и children не совместимы между собой.

context

Ссылка на контекст, в котором должен быть создан узел, необязательный.

Возвращаемое значение

Функция вернет ссылку на созданный узел.

Примеры использования

BX.create('input', {'attrs':{'readonly':'readonly'}, props{...}});

Метод незаменим, когда при создании новой DOM-структуры надо на элементы сразу добавлять события:

var completeAction = function(){
	console.log(BX.proxy_context);
};

BX.ready(function(){
	BX.insertAfter(BX.create('span', {
		attrs: {
			className: 'task-view-button'
		},
		dataset: {
			aaa: 123
		},
		events: {
			click: BX.proxy(completeAction, this)
		},
		text: 'Завершить'
	}), completeButton);
});

Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

0 Юрий Стариков 24.09.2021 14:01:46 Сообщение не промодерировано, возможны ошибки и неточности.
Учтите, что при создании тегов через данный метод - у вас ограничены именования data-атрибутов какими либо символами вплоть до самого используемого " - "

Алексей Попович 28.11.2020 22:30:33

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

Код

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

Наверх