DOM - Работа с элементами (узлами)

В этой главе вы узнаете, как добавлять и удалять узлы 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 элемент, вы должны знать его родительский элемент:

<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> 

Внимание! В спецификации DOM 4 реализован метод node.remove(). Однако из-за слабой поддержки браузерами, вам не следует его использовать.

Объяснение примера

Этот 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);

Конечно, было бы здорово иметь возможность просто удалить элемент, не ссылаясь на его родителя. Но, к сожалению, DOM так устроена, что ей нужно знать как сам элемент, который нужно удалить, так и его родителя.

Таким образом, имеем такую последовательность действий: находим элемент, который нужно удалить, и используем его свойство 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>