JavaScript метод document.createElement()

Определение и применение

JavaScript метод document.createElement() позволяет создать и вернуть новый элемент (пустой узел Element) с указанным именем тега.

Преобразование имени в нижний регистр выполняется для HTML-документа. В XML регистр сохраняется.

Опция customElementRegistry задаёт реестр пользовательских элементов для создаваемого узла; её поддержка ограничена. Опция is используется для настроенного встроенного элемента и также поддерживается не во всех браузерах. Для элементов SVG используйте createElementNS().

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (3) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьapi.Document.createElement
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`createElement`	✓1	✓12	✓1 Версия 1 выпущена в 2004 г. Примечание MDN (англ.) Doesn't conform to the DOM spec for XUL and XHTML documents: `localName` and `namespaceURI` are not set to null on the created element.	✓6	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Emoji and more Unicode in element and attribute names and namespace prefix (valid names match HTML parser)	✓143	✓143	✓149	✓127	×	✓143	✓149	✓94	×	✓30.0	✓143	×
options parameter	✓56 Версия 56 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓79 Версия 79 выпущена в 2020 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓50 Версия 50 выпущена в 2016 г. Примечание MDN (англ.) Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.	✓43 Версия 43 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓26	✓56 Версия 56 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓50 Версия 50 выпущена в 2016 г. Примечание MDN (англ.) Firefox for Android accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.	✓43 Версия 43 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓26	✓6.0 Версия 6.0 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓56 Версия 56 выпущена в 2017 г. Примечание MDN (англ.) For backwards compatibility, the `options` parameter can be an object or a string with the custom element tag name, although the string version is deprecated.	✓26
customElementRegistry option	✓146	✓146	✓preview	✓130	✓26	✓146	×	✓97	✓26	×	✓146	✓26
is parameter	✓56	✓79	×	✓43	×	✓56	×	✓43	×	✓6.0	✓56	×

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const element = document.createElement(tagName);
const customized = document.createElement(tagName, options);

Спецификация

DOM Standard.

Значения параметров

Параметры document.createElement()
Параметр	Описание
`tagName`	Строковое значение, указывающее на тип создаваемого элемента. В HTML-документе строка преобразуется в нижний регистр. Значение, не являющееся строкой, приводится к строке, поэтому `createElement(null)` создаёт элемент `<null>`, как и `createElement("null")`. Обязательный параметр.
`options`	Необязательный объект `ElementCreationOptions`. Свойство `is` задаёт имя настроенного встроенного элемента, ранее зарегистрированного методом `customElements.define()`, а свойство `customElementRegistry` — реестр пользовательских элементов. Необязательный параметр.

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

Создание кнопки и добавление её в документ

Нажмите ▶, затем Нажми меня несколько раз: каждый щелчок создаёт новую кнопку Mybutton и добавляет её в конец body.

index.html

HTML

<button data-migration-click-0="">Нажми меня</button>
<hr />

main.js

JavaScript

function myFunc() {
    let newElem = document.createElement('button')
    const text = document.createTextNode('Mybutton')
    newElem.appendChild(text)
    document.body.appendChild(newElem)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая:

с использованием JavaScript метода .createElement() объекта document создаем новый элемент <button>.
с использованием JavaScript метода createTextNode() объекта document создаем текстовое содержимое.
с использованием JavaScript метода .appendChild() объекта Node добавляем текстовое содержимое элементу <button>, а затем добавляем наш созданный элемент в элемент <body>.