Общее представление о DOM. Часть 3
Добавление элементов
Для создания узлов DOM служит метод document.createElement(). Он создает новый элемент, используя имя дескриптора, предоставляемое в качестве параметра. Вновь созданный элемент может быть затем введен в иерархическое дерево DOM. Чаще всего для этой цели используется метов appandChild(), присоединяющий порожденный узел в конце списка подобных узлов.
В приведенном ниже фрагменте кода новый пустой элемент <li> вводится в конце списка <ul> после каждого щелчка на соответствующей кнопке.
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();" value="Add item" />
Недостаток такого подхода заключается в том, что новый элемент всегда присоединяется в конце списка порожденных узлов. Для преодоления этого недостатка служит методы insertBefore(), позволяющий вставить новый узел до любого другого узла. Таким образом, новый узел может быть вставлен где угодно, только не в конце списка — в последнем случае потребуется метод appandChild(). В качестве параметров метода insertBefore() сначала указывается новый узел, а затем его новый родственный узел.
В приведенном ниже коде новый элемент <li> вставляется в начале списка после каждого щелчка на соответствующей кнопке.
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.insertBefore(newNode, list.firstChild);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();" value="Add item" />
Создание текстовых элементов
Если внутри элемента необходимо разместить текст, то потребуется текстовой узел, который является подузлом по отношению к узлу данного элемента. Такой текстовой узел создается с помощью метода createTextNode(). Нужно лишь указать конкретный текст.
В приведенном ниже фрагменте кода в список вновь вводятся элементы, но на этот раз в них отсутствует текст. Поэтому сначала создается текстовой узел, а затем этот текстовой узел присоединяется к другому узлу, который, в свою очередь, может быть присоединен к еще одному узлу, и т.д.
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
nr++;
var newTextNode = document.createTextNode("Item " + nr);
newNode.appendChild(newTextNode);
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />
Работа с атрибутами
До сих пор мы рассматривали обычные дескрипторы и текстовые узлы. Но картина была бы неполной без еще одной главной составляющей — атрибутов. Доступ к значению атрибута осуществляется с помощью метода getAttribute(). Добавить новый атрибут или изменить существующий можно с помощью метода setAttribute(), указав лишь имя атрибута и его значение. В приведенном ниже коде содержимое новых элементов <li> задается в виде гиперссылки с помощью устанавливаемого атрибута href.
var nr = 1;
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
var newLink = document.createElement("a");
newLink.setAttribute("href", "http://www.server.com/");
nr++;
var newTextNode = document.createTextNode("Item " + nr);
newLink.appendChild(newTextNode);
newNode.appendChild(newLink);
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item 1</li></ul>
<input type="button" onclick="addItem();" value="Add item" />
Оставьте свой отзыв