Шрифт:
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> содержит