> For the complete documentation index, see [llms.txt](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/dom/vstraivanie-elementov-v-dom.md).

# Встраивание элементов в DOM

## Свойство innerHTML

Еще один способ создать DOM-элементы и поместить их в дерево - это использовать строки с тегами и позволить браузеру сделать всю тяжелую работу. У такого подхода есть свои плюсы и минусы.

### Чтение[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/innerhtml#%D1%87%D1%82%D0%B5%D0%BD%D0%B8%D0%B5) <a href="#chtenie" id="chtenie"></a>

Свойство `innerHTML` хранит содержимое элемента, включая теги, в виде строки. Возвращаемое значение это всегда валидный HTML-код.

### Изменение[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/innerhtml#%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5) <a href="#izmenenie" id="izmenenie"></a>

Свойство `innerHTML` доступно как для чтения, так и для записи. Если записать в него строку с HTML-тегами, то браузер во время парсинга строки превратит их в валидные элементы и добавит в DOM-дерево.

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

При таком подходе, в отличии от `document.createElement()`, мы не получаем ссылку на созданный DOM-элемент. Это первый шаг на пути к шаблонизации - создания большого количества однотипной разметки с разными данными по заранее определённому шаблону. Например, как в списке товаров интернет магазина и т. п.

Однотипная (шаблонная) разметка создается из массива данных. Приём заключается в переборе этого массива и составлении одной строки с HTML тегами, которую потом записываем в `innerHTML` элемента.

### Добавление[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/innerhtml#%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) <a href="#dobavlenie" id="dobavlenie"></a>

Изменение `elem.innerHTML` полностью удалит и пересоздаст всех потомков элемента `elem`. Если элемент изначально не пустой, то будут дополнительные затраты на сериализацию уже существующей разметки, а это плохо.

Используйте свойство `elem.innerHTML` для добавления только в случае когда элемент `elem` пустой или если надо полностью заменить его содержимое.

### Метод `insertAdjacentHTML()`[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/innerhtml#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-insertadjacenthtml) <a href="#metod-insertadjacenthtml" id="metod-insertadjacenthtml"></a>

Современный метод для добавления строки с HTML-тегами до, после или внутрь элемента. Решает проблему `innerHTML` с повторной сериализацией содержимого элемента при добавлении разметки к уже существующей.

```
elem.insertAdjacentHTML(position, string);
```

Аргумент `position` - это строка, позиция относительно элемента `elem`. Принимает одно из четырёх значений.

* `"beforebegin"` - перед `elem`
* `"afterbegin"` - внутри `elem`, перед всеми детьми
* `"beforeend"` - внутри `elem`, после всех детей
* `"afterend"` - после `elem`

\
`"beforebegin"` и `"afterend"` работают только в том случае, если `elem` уже находится в DOM-дереве.