> 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/dinamicheskoe-sozdanie-i-udalenie-elementov.md).

# Динамическое создание и удаление элементов

### Создание[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/manipulation#%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5) <a href="#sozdanie" id="sozdanie"></a>

```
document.createElement(tagName);
```

Создает элемент с именем `tagName` и возвращает ссылку на него как результат своего выполнения. `tagName` - это строка, указывающая тип создаваемого элемента. Элемент создается в памяти, в DOM его еще нет.

```
const heading = document.createElement("h1");
console.log(heading); // <h1></h1>

heading.textContent = "This is a heading";
console.log(heading); // <h1>This is a heading</h1>

const image = document.createElement("img");
image.src = "https://placeimg.com/640/480/nature";
image.alt = "Nature";
console.log(image); // <img src="https://placeimg.com/640/480/nature" alt="Nature" />
```

### Добавление[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/manipulation#%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>

Чтобы созданный элемент был отображен на странице, его необходимо добавить к уже существующему элементу в DOM-дереве. Допустим, что добавляем в некий элемент `element`, для этого есть методы.

* `element.append(el1, el2, ...)` - добавляет один или несколько элементов после всех детей элемента `element`.
* `element.prepend(el1, el2, ...)` - добавляет один или несколько элементов перед всеми детьми элемента `element`.
* `element.after(el1, el2, ...)` - добавляет один или несколько элементов после элемента `element`.
* `element.before(el1, el2, ...)` - добавляет один или несколько элементов перед элементом `element`.

Во всех этих методах, `el` это элементы или строки, в любом сочетании и количестве. Строки добавляются как текстовые узлы.

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

### Удаление[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/manipulation#%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5) <a href="#udalenie" id="udalenie"></a>

```
elem.remove();
```

Для того, чтобы удалить элемент используется метод `remove()`. Он вызывается на самом элементе `elem`, который необходимо удалить