# Метод createElement

Метод `createElement` позволяет создать новый элемент, передав в параметре имя тега. После создания с элементом можно работать как с обычным элементом, а также его можно добавить на страницу методами `prepend`, `append`, `appendChild`, `insertBefore` или `insertAdjacentElement`.

Если записать результат работы `createElement` в переменную, то в этой переменной будет такой элемент, как будто бы мы получили его через `querySelector` или `getElementById`. Единственное отличие - наш элемент не будет размещен на странице. А так мы можем менять ему innerHTML, атрибуты, навешивать обработчики событий и в конце концов разместить его на странице.

## Синтаксис

`document.createElement('имя тега');`

## Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока `#parent`:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div>` `let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.textContent = '!'; parent.appendChild(p);`

Результат выполнения кода:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> <p>!</p> </div>`

## Пример

Дан `ul`. Давайте разместим в нем `9` тегов `li`, при этом их текстом сделаем порядковые номера:

`<ul id="parent"></ul>` `let parent = document.querySelector('#parent'); for (let i = 1; i <= 9; i++) { let li = document.createElement('li'); li.textContent = i; parent.appendChild(li); }`

Результат выполнения кода:

`<ul id="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>`

## Пример

Давайте при вставке элементов будем привязывать к ним обработчики событий:

`<ul id="parent"></ul>` `let parent = document.querySelector('#parent'); for (let i = 1; i <= 9; i++) { let li = document.createElement('li'); li.textContent = i; li.addEventListener('click', function() { alert(this.textContent); }); parent.appendChild(li); };`

:

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

- метод `cloneNode`,
  с помощью которого можно клонировать элемент
- метод `createTextNode`,
  с помощью которого можно создать новый текстовый узел

← →
↑
en ru