Введение в Объектную Модель Документа (DOM), часть 6 из 6

Работа с узлами элементов (Element Nodes)

Добавление и удаление узлов элементов в основном похоже на действия с текстовыми узлами. Различие по-существу только в создании узла и размещении внутри него контента.

Начнем. Вы создаете узел, используя метод document.createElement(), которому передаете название тэга, который хотите создать, например «p», «div», «table» и т.п. Этот параметр регистронезависимый, т.е. «div», «Div» и «DIV» будут означать один и тот же тэг. Только помните, браузер вернет имя тэга в верхнем регистре, если попытаетесь у него это спросить, попробуйте:

var el = document.createElement("div");
alert(el.tagName);

в результате увидите «DIV».

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

Но вновь созданный элемент — это просто пустой тэг. Поэтому ему неплохо добавить какие-нибудь атрибуты и текст. Следующий пример поможет это показать.

Этот текст внутри элемента DIV.

Добавить параграф.

Здесь при клике по ссылке создаем новый элемент P со своими дочерними узлами, который присоединяем к существующему элементу DIV.

<div id="sample4">Этот текст внутри элемента DIV.</div>
... код ссылки ...
var paraEl, boldEl;
paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(
  document.createTextNode("Этот новый параграф с "));
boldEl.appendChild(document.createTextNode("полужирным"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" текстом, добавлен в DIV"));
document.getElementById("sample4").appendChild(paraEl);

Сперва здесь создаем два новых элемента: тэги <p> и <b>. Затем элементу параграфа (P) добавляем новый текстовый узел со строкой «Этот новый параграф с «. Таким же образом добавляем «полужирным» элементу B. Затем добавляем этот элемент B (включая его дочерний текстовый узел) к параграфу. И следующий текстовый узел со строкой » текстом, добавлен в DIV» также добавляем к параграфу.

В данном случае элемент параграфа содержит три дочерних узла: текстовый узел (text node); узел элемента для тэга <b>; еще один текстовый узел. У элемента B только один текстовый узел. Завершающий этап — добавление вновь созданного параграфа существующему на странице тэгу <div>.

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

boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);

и

paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";

сделают полужирный текст красным. Другими словами, appendChild() фактически помещает не узел в дерево, а только его копию. Переменная boldEl по прежнему указывает на этот узел.

Вот пока и все…

Для повторения пройденного вернитесь к началу этой истории.

Внимание! Это материал 2005 года. Какие-то факты могли утратить актуальность.