JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Для создания текстовых узлов существует аналогичный метод:

var newnode = document.сreateTextNode("содержимое текстового узла");

Кроме того, объект

Document

определяет и другие фабричные методы, такие как редко используемый метод

createComment.

Один такой метод,

createDocumentFragment,

мы будем использовать в разделе 15.6.4. При работе с документами, в которых используются пространства

имен XML, можно использовать метод

createElementNS,

позволяющий указывать URI-идентификатор пространства имен и имя тега создаваемого объекта

Element

.

Еще один способ создания в документе новых узлов заключается в копировании существующих узлов. Каждый узел имеет метод

cloneNode,

возвращающий новую копию узла. Если передать ему аргумент со значением

true

, он рекурсивно создаст копии всех потомков, в противном случае будет создана лишь поверхностная копия. В броузерах, отличных от IE, объект

Document

дополнительно определяет похожий метод с именем

importNode.

Если передать ему узел из другого документа, он вернет копию, пригодную для вставки в текущий документ. Если передать ему значение true во втором аргументе, он рекурсивно импортирует все узлы-потомки.

15.6.2. Вставка узлов

После создания нового узла его можно вставить в документ с помощью методов типа

Node

:

appendChild

или

insertBefore.

Метод

appendChild

вызывается относительно узла

Element

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

lastChild

).

Метод

insertBefore

похож на метод

appendChild,

но он принимает два аргумента. В первом аргументе указывается вставляемый узел, а во втором - узел, перед которым должен быть вставлен новый узел. Этот метод вызывается относительно объекта узла, который станет родителем нового узла, а во втором аргументе должен передаваться дочерний узел этого родителя. Если во втором аргументе передать null, метод

insertBefore

будет вести себя, как

appendChild,

и вставит узел в конец.

Ниже приводится простая функция вставки узла в позицию с указанным числовым индексом. Она демонстрирует применение обоих методов,

appendChild

и

insertBefore:

// Вставляет узел child в узел parent так, что он становится n-м дочерним узлом

function insertAt(parent, child, n) {

if (n < 0 || n > parent.childNodes.length) throw new Error("недопустимый индекс");

else

if (n == parent.childNodes.length) parent.appendChild(child);

else parent.insertBefore(child, parent.childNodes[n]);

}

Если

метод

appendChild

или

insertBefore

используется для вставки узла, который уже находится в составе документа, этот узел автоматически будет удален из текущей позиции и вставлен в новую позицию; нет необходимости явно удалять узел. Пример 15.4 демонстрирует функцию сортировки строк таблицы по значениям ячеек в указанном столбце. Она не создает новые узлы и для изменения порядка следования существующих узлов использует метод

appendChild.

Пример 15.4. Сортировка строк таблицы

// Сортирует строки в первом элементе <tbody> указанной таблицы по значениям

// n-й ячейки в каждой строке. Использует функцию сравнения, если она указана.

// Иначе сортировка выполняется в алфавитном порядке,

function sort rows(table, n, comparator) {

var tbody = table.tBodies[0]; // Первый <tbody>; возможно созданный неявно

var rows = tbody.getElementsByTagName("tr"); // Все строки в tbody

rows = Array.prototype.slice.call(rows,0); // Скопировать в массив

// Отсортировать строки по содержимому n-го элемента <td>

rows.sort(function(row1,row2) {

var cell1 = row1.getElementsByTagName("td")[n]; // n-e ячейки

var cell2 = row2.getElementsByTagName("td")[n]; // двух строк

var vail = celH.textContent || celH.innerText; // текстовое содерж.

var val2 = cell2.textContent || cell2.innerText; // двух ячеек

if (comparator) return comparator(val1, val2); // Сравнить!

if (vail < val2) return -1;

else if (vail > val2) return 1;

else return 0;

});

// Добавить строки в конец tbody в отсортированном порядке.

// При этом строки автоматически будут удалены из их текущих позиций,

// благодаря чему отпадает необходимость явно удалять их. Если <tbody> содержит