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