Пошук уроків, статей та іншого контенту
Створюватимете, вставлятимете та видалятимете вузли, не покладаючись на небезпечний innerHTML.
DOM — це об’єктне представлення HTML-документа в пам’яті браузера. Кожен елемент, текст і атрибут сторінки представлений окремим вузлом.
Наприклад, для такого HTML:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>DOM міститиме:
елемент <ul>;
два елементи <li>;
текстові вузли з написами HTML і CSS.
JavaScript дає змогу створювати нові вузли, додавати їх до документа та видаляти вже наявні.
Для створення HTML-елемента використовують метод document.createElement():
const paragraph = document.createElement("p");
console.log(paragraph);Цей код створює елемент <p>, але ще не додає його на сторінку. Новий елемент існує в пам’яті, доки ми не вставимо його в DOM.
Для безпечного додавання тексту використовуйте властивість textContent:
const paragraph = document.createElement("p");
paragraph.textContent = "Це новий абзац";Тепер змінна paragraph містить такий елемент:
<p>Це новий абзац</p>textContent сприймає передане значення саме як текст. Навіть якщо рядок містить HTML-теги, вони не будуть виконані як розмітка.
const message = document.createElement("p");
message.textContent = "<strong>Важливе повідомлення</strong>";
document.body.append(message);У браузері буде показано текст <strong>Важливе повідомлення</strong>, а не жирний напис.
Створеному елементу можна додати клас через className або classList.
const title = document.createElement("h2");
title.textContent = "Список завдань";
title.className = "tasks-title";
document.body.append(title);Результат:
<h2 class="tasks-title">Список завдань</h2>Для роботи з кількома класами зручно використовувати classList:
const button = document.createElement("button");
button.textContent = "Зберегти";
button.classList.add("button", "button-primary");
document.body.append(button);Щоб додати атрибут, використовуйте setAttribute():
const link = document.createElement("a");
link.textContent = "Відкрити документацію";
link.setAttribute("href", "/documentation");
link.setAttribute("target", "_blank");
document.body.append(link);Для деяких стандартних властивостей можна використовувати пряме присвоєння:
const input = document.createElement("input");
input.type = "text";
input.placeholder = "Введіть ім’я";
input.disabled = true;
document.body.append(input);Створений вузол потрібно вставити всередину вже наявного елемента. Найчастіше для цього використовують метод append().
append()Метод append() додає один або кілька вузлів у кінець елемента:
const list = document.querySelector("ul");
const item = document.createElement("li");
item.textContent = "JavaScript";
list.append(item);Якщо початковий HTML був таким:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>після виконання JavaScript список стане таким:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>append() також може додавати текст:
const container = document.querySelector(".container");
container.append("Новий текст");Але для складніших елементів краще спочатку створити вузол через createElement().
prepend()Метод prepend() додає вузол на початок контейнера:
const list = document.querySelector("ul");
const item = document.createElement("li");
item.textContent = "Перший елемент";
list.prepend(item);Новий елемент з’явиться перед усіма іншими дочірніми елементами списку.
before() і after()Ці методи вставляють вузол поруч із вибраним елементом:
const currentItem = document.querySelector("li");
const newItem = document.createElement("li");
newItem.textContent = "Елемент перед першим";
currentItem.before(newItem);Метод after() вставляє вузол після вибраного елемента:
const currentItem = document.querySelector("li");
const newItem = document.createElement("li");
newItem.textContent = "Елемент після першого";
currentItem.after(newItem);Вузол не копіюється під час повторного додавання. Якщо додати вже наявний елемент в інше місце, він буде переміщений.
const firstList = document.querySelector("#first-list");
const secondList = document.querySelector("#second-list");
const item = firstList.querySelector("li");
secondList.append(item);Після цього item зникне з першого списку та з’явиться в кінці другого.
Щоб створити складнішу структуру, можна створювати кілька вузлів і вкладати їх один в один.
const article = document.createElement("article");
const heading = document.createElement("h2");
const paragraph = document.createElement("p");
heading.textContent = "Новина";
paragraph.textContent = "Текст новини розміщено в цьому абзаці.";
article.append(heading, paragraph);
document.body.append(article);Браузер отримає таку структуру:
<article>
<h2>Новина</h2>
<p>Текст новини розміщено в цьому абзаці.</p>
</article>Метод append() може приймати кілька аргументів, тому заголовок і абзац можна додати одним викликом.
remove()Щоб видалити елемент, викличте його метод remove():
const item = document.querySelector("li");
item.remove();Буде видалено перший знайдений елемент <li>.
Метод remove() зручний, коли у вас уже є посилання на елемент:
const message = document.querySelector(".message");
if (message) {
message.remove();
}Перевірка потрібна, якщо елемента може не бути на сторінці. Інакше спроба викликати remove() у значення null спричинить помилку.
removeChild()Батьківський елемент може видалити дочірній за допомогою removeChild():
const list = document.querySelector("ul");
const firstItem = list.querySelector("li");
if (firstItem) {
list.removeChild(firstItem);
}У сучасному JavaScript зазвичай простіше використовувати firstItem.remove(), але removeChild() також є коректним способом.
Щоб видалити всі дочірні вузли контейнера, можна виконувати видалення в циклі:
const list = document.querySelector("ul");
while (list.firstChild) {
list.firstChild.remove();
}Властивість firstChild повертає перший дочірній вузол. Цикл триває, доки в списку залишаються дочірні вузли.
Розглянемо повний приклад. Він створює список мов програмування та кнопку для видалення останнього елемента.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Список технологій</title>
</head>
<body>
<h1>Технології</h1>
<ul id="technology-list"></ul>
<button id="add-button" type="button">Додати технологію</button>
<button id="remove-button" type="button">Видалити останню</button>
<script>
const technologies = ["HTML", "CSS", "JavaScript"];
const list = document.querySelector("#technology-list");
const addButton = document.querySelector("#add-button");
const removeButton = document.querySelector("#remove-button");
function createTechnologyItem(name) {
const item = document.createElement("li");
item.textContent = name;
item.classList.add("technology-item");
return item;
}
for (const technology of technologies) {
const item = createTechnologyItem(technology);
list.append(item);
}
addButton.addEventListener("click", () => {
const item = createTechnologyItem("TypeScript");
list.append(item);
});
removeButton.addEventListener("click", () => {
const lastItem = list.lastElementChild;
if (lastItem) {
lastItem.remove();
}
});
</script>
</body>
</html>У цьому прикладі:
createElement("li") створює елемент списку.
textContent додає текст.
classList.add() додає клас.
append() вставляє елемент у список.
lastElementChild знаходить останній HTML-елемент.
remove() видаляє останній елемент.
DocumentFragmentЯкщо потрібно створити багато елементів, їх можна спочатку зібрати в DocumentFragment, а потім вставити в DOM одним викликом.
DocumentFragment — тимчасовий контейнер, який не є частиною документа:
const list = document.querySelector("ul");
const fragment = document.createDocumentFragment();
const items = ["HTML", "CSS", "JavaScript"];
for (const itemText of items) {
const item = document.createElement("li");
item.textContent = itemText;
fragment.append(item);
}
list.append(fragment);Переваги такого підходу:
код чітко відокремлює підготовку елементів від вставляння;
усі створені елементи додаються до документа одним викликом;
зручно працювати зі списками та іншими колекціями вузлів.
innerHTML для динамічних данихВластивість innerHTML дозволяє вставляти HTML-рядок:
container.innerHTML = "<p>Привіт</p>";Для статичного та повністю контрольованого рядка це може бути зручно. Проте вставляння даних користувача через innerHTML небезпечне:
const userName = prompt("Введіть ім’я");
container.innerHTML = `<p>Вітаємо, ${userName}</p>`;Користувач може ввести не лише звичайний текст, а й спеціально сформований HTML або небезпечний код. Це може призвести до атаки типу XSS.
Безпечніше створити елемент і встановити його текст через textContent:
const userName = prompt("Введіть ім’я");
const paragraph = document.createElement("p");
paragraph.textContent = `Вітаємо, ${userName}`;
container.append(paragraph);Тут значення userName буде оброблено як текст, а не як HTML-розмітка.
Для створення елемента зазвичай виконуйте такі кроки:
Знайдіть контейнер через querySelector().
Створіть елемент через document.createElement().
Додайте текст через textContent.
Налаштуйте класи та атрибути.
Вставте елемент через append(), prepend(), before() або after().
Для видалення викличте remove().
Наприклад:
const container = document.querySelector(".container");
const card = document.createElement("section");
card.classList.add("card");
card.setAttribute("aria-label", "Картка повідомлення");
card.textContent = "Повідомлення створено через DOM API";
container.append(card);const item = document.createElement("li");
item.textContent = "Новий пункт";Елемент створено, але його не видно на сторінці. Потрібно вставити його в DOM:
list.append(item);textContent не на тому елементіПереконайтеся, що змінна містить створений або знайдений елемент:
const item = document.createElement("li");
item.textContent = "Правильний текст";querySelector() повертає null, якщо не знаходить елемент:
const button = document.querySelector("#missing-button");
button.remove(); // ПомилкаБезпечний варіант:
const button = document.querySelector("#missing-button");
if (button) {
button.remove();
}innerHTML для даних користувачаНе вставляйте неперевірені значення в HTML-рядок. Для звичайного тексту використовуйте textContent.
querySelector() повертає лише перший відповідний елемент:
const item = document.querySelector("li");
item.remove();Якщо потрібно видалити кілька елементів, використовуйте querySelectorAll() і переберіть результат:
const items = document.querySelectorAll("li");
for (const item of items) {
item.remove();
}Створіть програму, яка:
Містить поле введення та кнопку «Додати».
Після натискання кнопки створює новий <li>.
Додає до нього текст із поля через textContent.
Вставляє <li> у список.
Очищує поле після додавання.
Не додає порожні елементи.
Додає кнопку «Видалити» для кожного пункту.
Для кнопки видалення можна використати такий підхід:
const item = document.createElement("li");
const removeButton = document.createElement("button");
item.textContent = "Завдання";
removeButton.textContent = "Видалити";
removeButton.addEventListener("click", () => {
item.remove();
});
item.append(removeButton);
list.append(item);document.createElement() створює новий елемент.
textContent безпечно додає текстовий вміст.
classList і setAttribute() допомагають налаштовувати елемент.
append() додає вузол у кінець контейнера.
prepend() додає вузол на початок контейнера.
before() і after() вставляють вузол поруч із наявним елементом.
remove() видаляє елемент із DOM.
DocumentFragment зручно використовувати для підготовки групи елементів.
Для динамічних даних краще використовувати DOM-методи та textContent, а не небезпечне вставляння через innerHTML.