Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Створення елемента в DOM». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Щоб створити елемент у DOM, використовують метод `document.createElement()`.** Він створює новий елемент, який потім можна додати на сторінку.

## Теорія

### TL;DR
- `document.createElement('tag')` створює вузол у пам'яті, на сторінці його ще немає.
- Далі елемент налаштовують: `textContent`, `className`, `classList`, `id`, атрибути.
- Вставка в документ: `appendChild()`, `append()`, `prepend()`, `insertBefore()`, `after()`, `before()`.
- `insertBefore()` дає змогу поставити елемент у конкретне місце, а не тільки в кінець.
- Вкладені структури збирають знизу вгору, а в документ додають один готовий корінь.

### Швидкий приклад

```javascript
const div = document.createElement('div'); // створюємо елемент <div>
div.textContent = 'Привіт, світе!';        // додаємо текст
document.body.appendChild(div);            // вставляємо його в кінець body
```

Результат у HTML:

```html
<body>
  <div>Привіт, світе!</div>
</body>
```

### Три кроки створення елемента

Створення елемента в DOM завжди складається з трьох кроків:

1. `document.createElement('tag')` - створюємо елемент.
2. Налаштовуємо його: додаємо текст, атрибути, класи тощо.
3. Додаємо в документ через `appendChild()`, `prepend()`, `insertBefore()`, `after()` або `before()`.

Поки не виконано третій крок, елемент існує окремо від сторінки: він є в пам'яті, але не має батьківського вузла і не рендериться.

### Атрибути, класи та вміст

```javascript
const button = document.createElement('button');
button.textContent = 'Натисни мене';
button.className = 'btn-primary';
button.id = 'myButton';
document.body.appendChild(button);
```

Тут одразу видно три типові налаштування: текст через `textContent`, клас через `className` (або `classList.add()`, якщо клас треба додати до наявних) та `id`. Довільні атрибути ставлять через `setAttribute('data-role', 'submit')`.

### Вкладені елементи

Складнішу структуру збирають по частинах, а в документ додають уже готовий корінь:

```javascript
const card = document.createElement('div');
card.classList.add('card');

const title = document.createElement('h2');
title.textContent = 'Картка';

const desc = document.createElement('p');
desc.textContent = 'Це приклад динамічно створеного блока.';

card.appendChild(title);
card.appendChild(desc);
document.body.appendChild(card);
```

Такий порядок вигідний: браузер перераховує розмітку один раз, коли в документ потрапляє вже зібраний `card`, а не після кожного вкладеного елемента.

### Вставка в конкретне місце

Якщо елемент треба вставити **не в кінець**, а, наприклад, **перед** чи **після** іншого елемента:

```javascript
const newItem = document.createElement('li');
newItem.textContent = 'Новий пункт';

const list = document.querySelector('ul');
list.insertBefore(newItem, list.firstChild); // вставляємо на початок списку
```

Сучасні альтернативи роблять те саме коротше:

| Метод | Куди вставляє |
| --- | --- |
| `parent.append(el)` | у кінець батьківського елемента |
| `parent.prepend(el)` | на початок батьківського елемента |
| `parent.insertBefore(el, ref)` | перед вузлом `ref` усередині `parent` |
| `ref.before(el)` | перед елементом `ref` |
| `ref.after(el)` | після елемента `ref` |

### Типові помилки

- **Забути вставити елемент у документ.** Після `createElement` елемент нікуди не додано, тому на сторінці його не видно, хоча в консолі змінна виглядає нормально.
- **Плутати `append()` і `appendChild()`.** `appendChild()` приймає лише один вузол і повертає його, `append()` приймає кілька вузлів і рядків, але нічого не повертає.
- **Вставляти HTML рядком через `innerHTML`.** Для даних від користувача це відкриває XSS; для тексту безпечніший `textContent`.
- **Додавати елементи по одному в циклі прямо в документ.** Кожна вставка змушує браузер перераховувати розмітку; збирайте дерево окремо або через `DocumentFragment` і вставляйте один раз.
- **Очікувати, що один вузол опиниться у двох місцях.** Вставка вже наявного елемента переміщує його, а не копіює; потрібна копія робиться через `cloneNode(true)`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати502 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.