document.createElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Общая информация

В HTML-документах создаёт элемент c тем тегом, что указан в аргументе или HTMLUnknownElement, если имя тега не распознаётся.

В XUL-документах создаёт указанный в аргументе элемент XUL.

В остальных случаях создаёт элемент с нулевым NamespaceURI.

Параметры

var element = document.createElement(tagName, [options]);
  • element — созданный объект элемента.
  • tagName — строка, указывающая элемент какого типа должен быть создан. nodeName создаётся и инициализируется со значением tagName.
  • options — необязательный параметр, объект ElementCreationOptions, который может содержать только поле is, указывающее имя пользовательского элемента, созданного с помощью customElements.define() (см. Веб-компоненты).

Пример

Данный пример создаёт новый элемент <div> и вставляет его перед элементом с идентификатором org_div1:

html
<div><h1>Привет!</h1></div>
<div id="org_div1">Текст выше сгенерирован автоматически.</div>
js
document.body.onload = addElement;
var my_div = (newDiv = null);

function addElement() {
  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Привет!</h1>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

Примечания

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

Для создания элементов с заданным пространством имён используйте метод createElementNS.

Реализация createElement в Gecko не соответствует DOM спецификации для XUL и XHTML документов: localName и namespaceURI не устанавливаются в null в созданном документе. Смотрите Firefox bug 280692 для подробностей.

Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.

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

Specification
DOM
# ref-for-dom-document-createelement①

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createElement
options parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Смотрите также