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>
Попробуйте сами »