Skip to main content

Як створити елемент у DOM?

JavaScriptJunior~1 хв читання
Запропонувати правку

Щоб створити елемент у 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().

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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