3.1 Створення елементів
Робота з DOM (Document Object Model) включає не лише навігацію по існуючих елементах, але й створення нових елементів, їх вставку в документ та видалення. Зараз розглянемо різні методи й підходи для створення та видалення елементів у DOM.
Метод document.createElement()
Основний метод для створення нового елемента в DOM — це document.createElement(). Цей метод приймає ім'я тега елемента, який потрібно створити, і повертає новий порожній елемент.
Приклад:
const newDiv = document.createElement('div');
Додавання вмісту в елемент
Після створення нового елемента його можна наповнити вмістом. Це може бути текст, інші елементи або комбінація того й іншого.
Приклад:
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div елемент';
Також можна використовувати властивість innerHTML, щоб додати HTML-вміст.
Приклад:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>Це новий div елемент з жирним текстом</strong>';
3.2 Вставка елементів у DOM
Створений елемент потрібно додати в документ. Існує кілька методів для вставки елементів у DOM:
1. Метод appendChild()
Метод appendChild() додає елемент в кінець списку дочірніх елементів зазначеного батьківського елемента.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>Це старий div елемент</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div елемент';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Метод insertBefore()
Метод insertBefore() додає елемент перед зазначеним дочірнім елементом батьківського елемента.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>Це старий div елемент</div>
<p>Це абзац</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div елемент';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Метод append()
Метод append() додає один або кілька вузлів або рядків в кінець списку дочірніх елементів зазначеного батьківського елемента.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>Це старий div елемент</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div елемент';
const body = document.querySelector('body');
body.append(newDiv);
4. Метод prepend()
Метод prepend() додає один або кілька вузлів або рядків на початок списку дочірніх елементів зазначеного батьківського елемента.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>Це старий div елемент</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'Це новий div елемент';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Клонування елементів
Метод cloneNode() дозволяє клонировать елемент. Клонування може бути глибоким (з копіюванням всіх дочірніх елементів) або неглибоким (лише самого елемента).
Приклад глибокого клонування:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Документ</title>
</head>
<body>
<div>
Це div елемент
<ul>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Приклад неглибокого клонування:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Документ</title>
</head>
<body>
<div>
Це div елемент
<ul>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
Сам елемент <div> був клонирований, це можна побачити завдяки стилям, але його дочірні елементи (текстовий вузол "Це div елемент" і <ul>) не були клоновані.
3.4 Видалення елементів
1. Метод removeChild()
Метод removeChild() видаляє дочірній елемент з батьківського елемента.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>
Це div елемент
<p>Це абзац</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Метод remove()
Метод remove() видаляє елемент з DOM напряму.
Приклад:
<html>
<head>
<title>Документ</title>
</head>
<body>
<div>Це div елемент</div>
<p>Це абзац</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Очистка контенту елемента
Метод innerHTML можна використовувати для видалення всього вмісту елемента, присвоївши йому порожній рядок.
Приклад:
<html>
<head>
<title>Документ</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Це div елемент
<p>Це абзац</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Видалення всіх дочірніх елементів
Для видалення всіх дочірніх елементів можна використовувати цикл або метод innerHTML.
Приклад з циклом:
<html>
<head>
<title>Документ</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
Це div елемент
<p>Це абзац</p>
<p>Це абзац</p>
<p>Це абзац</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Приклад з innerHTML:
<html>
<head>
<title>Документ</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
Це div елемент
<p>Це абзац</p>
<p>Це абзац</p>
<p>Це абзац</p>
<ul>
<li>Елемент 1</li>
<li>Елемент 2</li>
<li>Елемент 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ