JavaScript - DOM: добавление и удаление узлов

На этом уроке мы научимся создавать узлы-элементы (createElement) и текстовые узлы (createTextNode). А также рассмотрим методы, предназначенные для добавления узлов к дереву (appendChild, insertBefore) и для удаления узлов из дерева (removeChild).

Добавление узлов к дереву

Добавление нового узла к дереву обычно осуществляется в 2 этапа:

1. Создать необходимый узел, используя один из следующих методов:
• createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод createElement(element) имеет один обязательный параметр (element) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан.
• createTextNode() - создаёт текстовый узел с указанным текстом. Метод createTextNode(text) имеет один обязательный параметр (text) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан.
2. Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:
   • appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод appendChild(node) имеет один обязательный параметр это узел (node), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел.
   • insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод insertBefore(newNode,existingNode) имеет два параметра: newNode (обязательный) - узел, который Вы хотите добавить, existingNode (не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата метод insertBefore() возвращает вставленный узел.

Например:

<ul id="list"><li>Компьютер</li><li>Ноутбук</li><li>Планшет</li></ul>

//создаём элемент (узел) li
var elementLI = document.createElement("li");
//создаём текстовый узел, содержащий текст "Смартфон"
var textSmart= document.createTextNode("Cмapтфoн");
//добавляем созданный текстовый узел как последний дочерний элемент к только что созданному элементу LI
elementLI.appendChild(textSmart);
//получаем элемент, к которому будет добавлен созданный узел li как дочерний
var elementUL = document.getElementById("list");
//добавляем созданный элемент li как последний дочерний элемент к UL с id="list"
elementUL.appendChild(elementLI);

Методы appendChild() и insertBefore() при работе с существующими узлами

Работа с существующими узлами методами appendChild() и insertBefore() также осуществляется в 2 этапа:

1. Получить существующий узел в дереве.
2. Указать место, куда необходимо вставить узел, с помощью метода appendChild() или insertBefore(). При этом узел будет удалён из предыдущего места.

//получаем элемент UL, содержащий список, по его id
var elementUL = document.getElementById("list");
//получить элемент li, содержащий текстовый узел "Планшет"
var elementLI = elementUL.childNodes[2];
//добавляем элемент в начало списка
//при этом он будет удалён из исходного места
elementUL.insertBefore(elementLI,elementUL.firstChild);

Задание

• Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
• Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.

Удаление узлов

Удаление узла из дерева осуществляется в 2 этапа:

1. Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов: getElementById(), getElementsByClassName(), getElementsByTagName(), getElementsByName(), querySelector() или querySelectorAll().
2. Вызвать у родительского узла метод removeChild(), которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.
   Метод removeChild() возвращает в качестве значения удалённый узел или null, если узел, который мы хотели удалить, не существовал.

//найти узел, который мы хотим удалить
var findElement = document.getElementById("notebook");
//вызвать у родительского узла метод removeChild
//и передать ему в качестве параметра найденный узел
findElement.parentNode.removeChild(findElement);

//получить элемент, имеющий id="myID"
var myID = document.getElementById("myID");
//получить последний дочерний узел у элемента myID
var lastNode = myID.lastChild;
//т.к. мы не знаем, является ли последний дочерний узел элемента элементом,
//то воспользуемся циклом while для поиска последнего дочернего элемента у элемента myID 
//пока у элемента есть узел и его тип не равен 1 (т.е. он не элемент) выполнять
while(lastNode && lastNode.nodeType!=1) {
  //перейти к предыдущему узлу
  lastNode = lastNode.previousSibling;
}
//если у узла myID мы нашли элемент
if (lastNode) {
  //то его необходимо удалить
  lastNode.parentNode.removeChild(lastNode);
}

//получить элемент, у которого мы хотим удалить все его дочерние узлы
var elementQuestion = document.getElementById("myQuestion");
//пока есть первый элемент
while (elementQuestion.firstElement) {
  //удалить его
  elementQuestion.removeChild(element.firstChild);
}

Задание

1. Напишите функцию, удаляющую все текстовые узлы у элемента.
2. Имеется 2 списка (<ul>...</ul>), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.