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