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

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

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> содержит
  // какие-либо другие узлы, отличные от элементов <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
  }
}

Оглавление книги