JavaScript метод document.createElement()

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`document.createElement()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

document.createElement( tagName )
document.createElement( tagName, options )

tagName - String
options - Object

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

Document Object Model (DOM) Level 1

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

Параметр	Описание
tagName	Строковое значение, указывающее на тип создаваемого элемента. Строка, указанная в параметре, преобразуется в нижний регистр. В Firefox, Opera и Chrome метод .createElement( null ) работает так же, как .createElement( "null" ).
options	Необязательный объект ElementCreationOptions, содержащий одно свойство с именем is, значение которого является именем тега для пользовательского элемента, ранее определенного с помощью метода customElements.define().

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода document.createElement()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<hr>
		<script>
	function myFunc() {
	  let  newElem = document.createElement( "button" ); // создаем новый элемент <button>
	  const text = document.createTextNode( "Mybutton" ); // создаем текстовое содержимое
	  newElem.appendChild( text ); // добавляем текстовое содержимое элементу <button>                     
	  document.body.appendChild( newElem );  // добавляем наш элемент в элемент <body>
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript метода document.createElement()

JavaScript Document