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("Это новый.");
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("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
Попробуйте сами »
