Створення елемента в DOM

JavaScriptJunior~2 хв читання

Щоб створити елемент у 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 завжди складається з трьох кроків:

document.createElement('tag') - створюємо елемент.
Налаштовуємо його: додаємо текст, атрибути, класи тощо.
Додаємо в документ через 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).

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

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

Premium

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