Работа с узлами элементов (Element Nodes)
Добавление и удаление узлов элементов в основном похоже на действия с текстовыми узлами. Различие по-существу только в создании узла и размещении внутри него контента.
Начнем. Вы создаете узел, используя метод document.createElement()
, которому передаете название тэга, который хотите создать, например “p”, “div”, “table” и т.п. Этот параметр регистронезависимый, т.е. “div”, “Div” и “DIV” будут означать один и тот же тэг. Только помните, браузер вернет имя тэга в верхнем регистре, если попытаетесь у него это спросить, попробуйте:
var el = document.createElement("div");
alert(el.tagName);
в результате увидите “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 года. Какие-то факты могли утратить актуальность.