JavaScript HTML DOM Елементи (Вузли)
В цьому розділі йдеться про додавання і видалення вузлів (HTML елементів).
Створення нових HTML елементів (вузлів)
Щоб додати новий елемент до HTML DOM, ви повинні спочатку створити елемент (вузол елемента), а потім додати його до існуючого елемента.
Приклад
<div id="div1">
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Спробуйте самі »
Пояснення прикладу
В цьому коді створюється новий елемент <p>:
const para = document.createElement("p");
Щоб додати текст до елемента <p>, спочатку потрібно створити текстовий вузол. Цей код створює текстовий вузол:
const node = document.createTextNode("Це новий параграф.");
Потім ви повинні додати текстовий вузол до елемента <p>:
para.appendChild(node);
Нарешті, ви повинні додати новий елемент до існуючого.
Цей код знаходить існуючий елемент:
const element = document.getElementById("div1");
Цей код додає новий елемент до існуючого:
element.appendChild(para);
Створення нових елементів HTML - insertBefore()
Метод appendChild() у попередньому прикладі додав новий елемент як останній дочірній елемент батьківського.
Якщо ви цього не хочете, можете скористатися методом insertBefore():
Приклад
<div id="div1">
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("Це новий.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Спробуйте самі »
Видалення наявних елементів HTML
Щоб видалити елемент HTML, скористайтеся методом remove():
Приклад
<div>
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>
Спробуйте самі »
Пояснення прикладу
Документ HTML містить елемент <div> із двома дочірніми вузлами (два елементи <p>):
<div>
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
Знайдіть елемент, який потрібно видалити:
const elmnt = document.getElementById("p1");
Потім виконайте метод remove() для цього елемента:
elmnt.remove();
Метод remove() не працює в старіших браузерах. Перегляньте наведений нижче приклад використання removeChild() замість цього.
Видалення дочірнього вузла
Для браузерів, які не підтримують метод remove(), потрібно знайти батьківський вузол, щоб видалити елемент:
Приклад
<div id="div1">
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Спробуйте самі »
Пояснення прикладу
Цей документ HTML містить елемент <div> із двома дочірніми вузлами (два елементи <p>):
<div id="div1">
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
Знайдіть елемент з id="div1":
const parent = document.getElementById("div1");
Знайдіть елемент <p> із id="p1":
const child = document.getElementById("p1");
Видалити дочірній елемент від батьків:
parent.removeChild(child);
Ось загальний обхідний шлях: знайдіть дочірній елемент, який потрібно видалити, і скористайтеся його властивістю parentNode, щоб знайти батьківського:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Заміна елементів HTML
Щоб замінити елемент у HTML DOM, скористайтеся методом replaceChild():
Приклад
<div id="div1">
<p id="p1">Це параграф.</p>
<p id="p2">Це інший параграф.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("Це новий.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
Спробуйте самі »
