5.5.5.Создание новых узлов

DOM поддерживает следующие методы: createElement(tagName) – создает узел; createTextNode(string) – создает текстовый узел; createAttribute(name) – создает атрибут; createComment(string) – создает HTML-комментарий; createDocumentFragment() – создает новый документ;

Предположим, что нужно добавить к существующему списку элемент: <LI>XML</LI>. Этому элементу в DOM соответствуют два узла: узел-элемент <LI> и текстовый узел "XML". Следовательно, нужно создать два новых узла с помощью методов createElement() и createTextNode().

var oI = document.createElement("LI")

var oText =document.createTextNode("XML")

Чтобы узел стал частью документа, его надо добавить к существующим узлам. Метод appendChild(newChild) добавляет новый узел newChild после узла, который его активизировал. Например, oI.appendChild(oText) добавляет узел oText к узлу oI. Для добавления узлов в документ используются также метод insertBefore(newChild, referenceChild);

Теперь имеем в памяти элемент <LI>XML</LI>.

Если надо вставить полученную цепочку элементов в конец списка, то следует использовать метод appendChild() или oList.appendChild(oI). Теперь наш список выглядит так:

<UL ID="components">

<LI>HTML</LI>

<LI>CSS</LI>

<LI>Javascript</LI>

<LI>XML</LI>

</UL>

Как можно вставить элемент списка не в конец, а, скажем, после элемента списка <LI>HTML</LI>? Сделать это следует с помощью метода insertBefore(), который добавляет новый узел перед дочерним узлом, указанным в параметре referenceChild. В отличие от метода appendChild(), метод insertBefore() позволяет определить, в какое место коллекции childNodes будет вставлен новый узел. Итак, код var oBrother = oList.firstChild.nextSiblingoList.insertBefore(oI, oBrother) добавляет в коллекцию childNodes узла oList узел oI сразу после узла childNodes[0].

Теперь первоначальный список выглядит так:

<UL ID="components">

<LI>HTML</LI>

<LI>XML</LI>

<LI>CSS</LI>

<LI>Javascript</LI>

</UL>

Удаление и замена узлов в документе

Метод replaceChild() позволяет заменить одного из потомков узла на нового, узел oldChild – на newChild:

currentNode.replaceChild(newChild, oldChild).

В следующем фрагменте сценария создается элемент списка с текстом "JScript", а затем им заменяется последний элемент списка. Метод возвращает ссылку на вставленный узел.

var oItem = document.createElement("LI")

oI.appendChild(document.createTextNode("JScript"))

oList.replaceChild(oI, oList.lastChild)

Теперь наш список выглядит так:

<UL ID="components">

<LI>HTML</LI>

<LI>CSS</LI>

<LI>JScript</LI>

</UL>

Тот же результат можно получить и без использования replaceChild():

oList.lastChild.firstChild.nodeValue= "JScript"

Метод removeChild() позволяет у узла удалить одного из его потом­ков. Например, строка кода удаляет из списка последний элемент.

var oRemovedItem = oList.removeChild(oList.lastChild)

Метод возвращает ссылку на удаляемый им узел.

Чтобы удалить некоторый узел, надо воспользоваться методом removeNode(). Если значение параметра равно false, то удаляется только тот узел, который активизировал метод. При этом идущая от него ветвь дерева присоединяется к его родительскому узлу. Если параметр метода равен true, то узел удаляется вместе со своими потомками. Например, строка кода удаляет из документа весь список.

var oRemovedList = oList.removeNode(true)