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

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

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

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

Контент

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

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

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

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

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

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

### Приклад 1: простий елемент

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

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

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

---

### Приклад 2: з атрибутами і класами

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

---

### Приклад 3: вкладені елементи

```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);
```

---

### Приклад 4: додавання в конкретне місце

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

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

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

---

### Підсумок

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

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

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

Для рев’юера

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

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