Вставка детей (appendChild), добавление узлов и атрибутов, добавление текста к текстовому узлу (insertData)

Рубрика: DOM - Объектная Модель Документа

Приветствую, уважаемые читатели блога okITgo.ru! Сегодня мы рассмотрим всевозможные способы, позволяющие добавлять узлы в XML документ, а также изучим методы добавления атрибутов и вставки детей (т.е. дочерних узлов – сыновей, сестер – кому как больше нравится :-)). Кроме того Вы узнаете (если еще не знаете), как можно добавить текст в текстовые узлы.


Попробуйте Сами – Примеры

Примеры ниже используют XML файл books.xml.
Функция loadXMLDoc(), определенная во внешнем скрипте JavaScript, используется для загрузки XML файла.

Добавление узла после последнего дочернего узла
Этот пример использует appendChild() для добавления дочернего узла к существующему узлу.

Добавление узла перед указанным дочерним узлом
Данный пример использует insertBefore() для вставки узла перед указанным дочерним узлом.

Добавить новый атрибут
Этот пример использует метод setAttribute() для добавления нового атрибута.

Добавление данных к текстовому узлу
Данный пример использует insertData() для вставки данных в существующий текстовый узел.


Добавление Узла – appendChild()

Метод appendChild() добавляет дочерний узел к существующему узлу.

Новый узел добавляется (прикрепляется) после существующих дочерних узлов.

Замечание: Используйте insertBefore(), если положение узла существенно.

Следующий фрагмент кода создает элемент (<edition>) и добавляет его после последнего дочернего узла первого элемента <book>:

Пример

xmlDoc=loadXMLDoc("books.xml");

newel=xmlDoc.createElement("edition");

x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);

Попробуйте сами »

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

  1. Загружаем " books.xml" в xmlDoc, используя loadXMLDoc()
  2. Создаем новый узел <edition>
  3. Прицепляем узел к первому элементу <book>

Циклический обход и добавление элемента ко всем элементам <book>:Попробуйте сами


Вставка Узла – insertBefore()

Метод insertBefore() используется для вставки узла перед указанным дочерним узлом.

Этот метод полезен, когда положение добавляемого узла имеет значение:

Пример

xmlDoc=loadXMLDoc("books.xml");

newNode=xmlDoc.createElement("book");

x=xmlDoc.documentElement;
y=xmlDoc.getElementsByTagName("book")[3];

x.insertBefore(newNode,y);

Попробуйте сами »

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

  1. Загружаем "books.xml" в xmlDoc посредством loadXMLDoc()
  2. Создаем новый узел элемента <book>
  3. Вставляем новый узел перед последним узлом элемента <book>

Если второй параметр insertBefore() не указан, новый узел будет добавлен за последним существующим дочерним узлом.

x.insertBefore(newNode,null) и x.appendChild(newNode) оба будут прицеплять новый узел к x (за последним дочерним узлом).


Добавление Нового Атрибута

Нет метода под названием addAtribute().

Метод setAttribute() создает новый атрибут, если атрибута не существует:

Пример

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName(‘book’);
x[0].setAttribute("edition","первое");

Попробуйте сами »

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

  1. Загружаем "books.xml" в xmlDoc с помощью loadXMLDoc()
  2. Устанавливаем (создаем) атрибут "edition", присваивая ему значение "первое", для первого элемента <book>

Замечание: Если атрибут уже существует, то метод setAttribute() перезапишет существующее значение.


Добавление Текста к Текстовому Узлу – insertData()

Метод insertData() вставляет данные в существующий текстовый узел.

Метод insertData() имеет два параметра:

  • смещение (offset) – С какой позиции начать вставку символов (начинается с нуля)
  • строка (string) – Строка для вставки

Следующий фрагмент кода добавит "Лечебный " к текстовому узлу первого элемента <title> загруженного XML:

Пример

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Лечебный ");

Попробуйте сами »

Спасибо за внимание! До новых встреч на страницах сайта okITgo.ru.