Документ: метод createElement()

Базовая Широко поддерживается *

Эта функция хорошо зарекомендовала себя и работает во многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь разную степень поддержки.

В документе HTML, метод document.createElement() создаёт HTML-элемент, указанный localName, или HTMLUnknownElement, если localName не распознаётся.

Синтаксис

createElement(localName)
createElement(localName, options)

Параметры

localName

Строка, определяющая тип создаваемого элемента. Не используйте полные имена (например, "html:a") с этим методом. При вызове на HTML-документе, createElement() преобразует localName в нижний регистр перед созданием элемента. В Firefox, Opera и Chrome, createElement(null) работает так же, как createElement("null").

options Необязательно

Объект со следующими свойствами:

is: Имя тега пользовательского элемента, предварительно определённого через customElements.define(). Подробнее см. Пример веб-компонента.

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

Новый Element.

Примечание: Возвращается новый HTMLElement, если документ является HTMLDocument — что является наиболее распространённым случаем. В противном случае возвращается новый Element.

Примеры

Базовый пример

Это создаёт новый <div> и вставляет его перед элементом с ID div1.

HTML

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elements</title>
  </head>
  <body>
    <div id="div1">The text above has been created dynamically.</div>
  </body>
</html>

JavaScript

document.body.onload = addElement;

function addElement() {
  // create a new div element
  const newDiv = document.createElement("div");

  // and give it some content
  const newContent = document.createTextNode("Hi there and greetings!");

  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

Результат

Пример веб-компонента

Примечание: Проверьте раздел совместимости браузеров для поддержки и справку по атрибуту is для особенностей реализации пользовательских встроенных элементов.

Следующий пример взят из нашего примера expanding-list-web-component (посмотреть в действии). В этом случае наш пользовательский элемент расширяет HTMLUListElement, который представляет элемент <ul>.

// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    // …
  }
}

// Define the new element
customElements.define("expanding-list", ExpandingList, { extends: "ul" });

Если нам нужно создать экземпляр этого элемента программно, мы бы использовали вызов по следующему образцу:

let expandingList = document.createElement("ul", { is: "expanding-list" });

Новому элементу будет задан атрибут is со значением имени тега пользовательского элемента.

Примечание: Для обратной совместимости со старыми версиями спецификации Custom Elements, некоторые браузеры позволят вам передать строку вместо объекта, где значение строки — имя тега пользовательского элемента.

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

Спецификация
DOM # ref-for-dom-document-createelement①

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`createElement`	1	12	1 Не соответствует спецификации DOM для XUL и XHTML документов: `localName` и `namespaceURI` не устанавливаются в null для созданного элемента.	6	1	18	4	10.1	1	1.0	4.4
`options_parameter`	56 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	79 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	50 Firefox принимает строку вместо объекта здесь, но только начиная с версии 51. В версии 50 параметры должны быть объектом.	43 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	Нет	56 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	50 Firefox для Android принимает строку вместо объекта здесь, но только начиная с версии 51. В версии 50 параметры должны быть объектом.	43 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	Нет	6.0 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.	56 Для обратной совместимости параметр `options` может быть объектом или строкой с именем тега пользовательского элемента, хотя версия со строкой устарела.

См. также

Node.removeChild()
Node.replaceChild()
Node.appendChild()
Node.insertBefore()
Node.hasChildNodes()
document.createElementNS() — для явного указания URI пространства имён для элемента.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement