JavaScript HTML DOM Элементы (Nodes)
Добавление и удаление узлов (элементов HTML)
Создание новых элементов HTML (узлов)
Чтобы добавить новый элемент в DOM HTML, необходимо сначала создать элемент (узел элемента), а затем присоединить его к существующему элементу.
Example
<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-инсертбефоре ()
Метод AppendChild () в предыдущем примере добавляет новый элемент в качестве последнего дочернего элемента родительского объекта.
Если вы не хотите, чтобы вы могли использовать метод инсертбефоре ():
Пример
<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 () не работает ни в одной из версий обозревателя Internet Explorer.
Пример объяснено
Этот HTML-документ содержит элемент <div> с двумя дочерними узлами (двумя <p> элементами):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Найдите элемент с идентификатором = "Div1":
var parent = document.getElementById("div1");
Найдите элемент <p> с идентификатором = "P1":
var child = document.getElementById("p1");
Удалите дочерний элемент из родительского элемента:
parent.removeChild(child);
Было бы неплохо иметь возможность удалить элемент без ссылки на родительский объект.
Но Прости. DOM необходимо знать как элемент, который требуется удалить, так и его родительский объект.
Вот типичный обходной путь: Найдите дочерний элемент, который требуется удалить, и используйте его свойство ParentNode для поиска родительского объекта:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Замена элементов 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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
