JavaScript - DOM: добавление и удаление узлов
На этом уроке мы научимся создавать узлы-элементы (createElement
) и текстовые узлы (createTextNode
). А также рассмотрим методы, предназначенные для добавления узлов к дереву (appendChild
, insertBefore
) и для удаления узлов из дерева (removeChild
).
Добавление узлов к дереву
Добавление нового узла к дереву обычно осуществляется в 2 этапа:
- Создать необходимый узел, используя один из следующих методов:
- createElement() - создаёт элемент (узел) с указанным именем (тегом). Метод
createElement(element)
имеет один обязательный параметр (element
) - это строка, содержащая имя создаваемого элемент (тега). Указывать имя элемента (тега) в параметре необходимо заглавными буквами. В качестве результата данный метод возвращает элемент, который был создан. - createTextNode() - создаёт текстовый узел с указанным текстом. Метод
createTextNode(text)
имеет один обязательный параметр (text
) - это строка, содержащая текст текстового узла. В качестве результата данный метод возвращает текстовый узел, который был создан. - Указать место в дереве, куда необходимо вставить узел. Для этого необходимо воспользоваться одним из следующих методов:
- appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод
appendChild(node)
имеет один обязательный параметр это узел (node
), который Вы хотите добавить. В качестве результата данный метод возвращает добавленный узел. - insertBefore() - вставляет узел как дочерний узел элемента, для которого вызывается данный метод. Метод
insertBefore(newNode,existingNode)
имеет два параметра:newNode
(обязательный) - узел, который Вы хотите добавить,existingNode
(не обязательный) - это дочерний узел элемента перед которым, необходимо вставить узел. Если второй параметр (existingNode
) не указать, то данный метод вставит его в конец, т.е. в качестве последнего дочернего узла элемента для которого вызывается данный метод. В качестве результата методinsertBefore()
возвращает вставленный узел.
- appendChild() - добавляет узел как последний дочерний узел элемента, для которого вызывается данный метод. Метод
Например:
<ul id="list"><li>Компьютер</li><li>Ноутбук</li><li>Планшет</li></ul>
Рассмотрим более сложный пример, в котором добавим к дереву узел LI
, содержащий текстовый узел с текстом "Смартфон", в конец списка ul
.
Для этого необходимо выполнить следующее:
- Создать элемент (узел)
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 этапа:
- Получить существующий узел в дереве.
- Указать место, куда необходимо вставить узел, с помощью метода
appendChild()
илиinsertBefore()
. При этом узел будет удалён из предыдущего места.
Например, добавить существующий элемент li
, содержащий текст “Планшет" в начало списка (при этом он будет удалён из предыдущего места):
//получаем элемент UL, содержащий список, по его id var elementUL = document.getElementById("list"); //получить элемент li, содержащий текстовый узел "Планшет" var elementLI = elementUL.childNodes[2]; //добавляем элемент в начало списка //при этом он будет удалён из исходного места elementUL.insertBefore(elementLI,elementUL.firstChild);
Задание
- Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
- Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.
Удаление узлов
Удаление узла из дерева осуществляется в 2 этапа:
- Получить (найти) этот узел в дереве. Это действие обычно осуществляется одним из следующих методов:
getElementById()
,getElementsByClassName()
,getElementsByTagName()
,getElementsByName()
,querySelector()
илиquerySelectorAll()
. - Вызвать у родительского узла метод removeChild(), которому в качестве параметра необходимо передать узел, который мы хотим у него удалить.
МетодremoveChild()
возвращает в качестве значения удалённый узел илиnull
, если узел, который мы хотели удалить, не существовал.
//найти узел, который мы хотим удалить var findElement = document.getElementById("notebook"); //вызвать у родительского узла метод removeChild //и передать ему в качестве параметра найденный узел findElement.parentNode.removeChild(findElement);
Например, удалить последний дочерний элемент у элемента, имеющего id="myID"
:
//получить элемент, имеющий 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); }
Например, удалить все дочерние узлы у элемента, имеющего id="myQuestion"
:
//получить элемент, у которого мы хотим удалить все его дочерние узлы var elementQuestion = document.getElementById("myQuestion"); //пока есть первый элемент while (elementQuestion.firstElement) { //удалить его elementQuestion.removeChild(element.firstChild); }
Задание
- Напишите функцию, удаляющую все текстовые узлы у элемента.
- Имеется 2 списка (
<ul>
...</ul>
), напишите код на языке JavaScript, удаляющий все элементы из 1 и 2 списка.
чтобы прокрутить в цикле получить данные и подставить значение в тег списка в этом же теге снова передаю данные с помощью onchange той же функции js, где она должна так же отправить данные на сервер, получить ответ и создать следующий DOM элемент div с другим id вставив тег select>option и вывести следом за предыдущим в родительском элементе…
То есть при каждом возврате данных с сервера мне надо чтобы создавался DOM элемент, в него добавлялся тег или к примеру(в зависимости от типа поля).
itchief.ru/assets/uploadify/a/9/b/a9ba2d009d894505e538eb5f9440ac5b.png
При первом вызове этой функции все отрабатывает правильно, создает элемент, отображается в DOM структуре, при повторном попадании создает также элемент div присваивает ему id, но когда использую appendChild() ругается: Cannot read property 'appendChild' of null. Я как понимаю скрипт отрабатывается раньше загрузки разметки… Какими путями можно решить данную задачу?