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

We use cookies. Read the Privacy and Cookie Policy

После создания нового узла его можно вставить в документ с помощью методов типа 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> содержит

  // какие-либо другие узлы, отличные от элементов <tr>, эти узлы "всплывут" наверх.

  for(var і = 0; і < rows.length; i++) tbody.appendChild(rows[i]);

}

// Отыскивает в таблице элементы <th> (предполагается, что в таблице существует

// только одна строка с ними) и добавляет в них возможность обработки щелчка мышью,

// чтобы щелчок на заголовке столбца вызывал сортировку таблицы по этому столбцу.

function makeSortable(table) {

  var headers = table.getElementsByTagName("th");

  for(var і = 0; і < headers.length; i++) {

    (function(n) { // Чтобы создать локальную область видимости

      headers[i].onclick = function() { sortrows(table, n); };

      }(i)); // Присвоить значение і локальной переменной n

  }

}