Элементы JavaScript HTML DOM (узлы)
Добавление и удаление узлов (элементов HTML)
Создание новых элементов HTML (узлов)
Чтобы добавить новый элемент в HTML DOM, вы должны сначала создать элемент (узел элемента), а затем добавить его к существующему элементу.
Пример
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</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("This is a new paragraph.");
Затем вы должны добавить текстовый узел к <p>элементу:
para.appendChild(node);
Наконец, вы должны добавить новый элемент к существующему элементу.
Этот код находит существующий элемент:
const element = document.getElementById("div1");
Этот код добавляет новый элемент к существующему элементу:
element.appendChild(para);
Создание новых HTML-элементов — insertBefore()
Метод appendChild()в предыдущем примере добавил новый элемент в качестве последнего дочернего элемента родителя.
Если вы не хотите этого, вы можете использовать insertBefore()метод:
Пример
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Объяснение примера
Документ HTML содержит <div>элемент с двумя дочерними узлами (два <p>
элемента):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Найдите элемент, который хотите удалить:
const elmnt = document.getElementById("p1");
Затем выполните метод remove() для этого элемента:
elmnt.remove();
Этот remove()метод не работает в старых браузерах, смотрите пример ниже, как его использовать
removeChild().
Удаление дочернего узла
Для браузеров, которые не поддерживают этот remove()метод, вам нужно найти родительский узел, чтобы удалить элемент:
Пример
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</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">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>