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 элементов - remove()
Чтобы удалить 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()
Для браузеров, не поддерживающих метод 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 элементов - replaceChild()
Чтобы заменить элемент на 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>
Попробуйте сами »
