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

Еще один способ создания в документе новых узлов заключается в копировании существующих узлов. Каждый узел имеет метод 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> содержит
   // какие-либо другие узлы, отличные от элементов <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); };