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

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

}

Если метод

appendChild()

или

insertBefore()

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

appendChild().

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

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

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

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

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 в отсортированном порядке.

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

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

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

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

}

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

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

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

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

 }

}

15.6.3. Удаление и замена узлов

Метод

removeChild()

удаляет элемент из дерева документа. Но будьте внимательны: этот метод вызывается не относительно узла, который должен быть удален, а (как следует из фрагмента «child» в его имени) относительно родителя удаляемого узла. Этот метод вызывается относительно родителя и принимает в виде аргумента дочерний узел, который требуется удалить. Чтобы удалить узел n из документа, вызов метода должен осуществляться так:

n.parentNode.removeChild(n);

Метод

replaceChild()

удаляет один дочерний узел и замещает его другим. Этот метод должен вызываться относительно родительского узла. В первом аргументе он принимает новый узел, а во втором - замещаемый узел. Например, ниже показано, как заменить узел n текстовой строкой:

n.parentNode.replaceChild(document.createTextNode("[ ИСПРАВЛЕНО ]"). n);

Следующая функция демонстрирует еще один способ применения метода

replaceChild():

<b>// Замещает узел n новым элементом &lt;b&gt; и делает узел п его дочерним элементом, </b>

function embolden(n) {

<b>  // Если вместо узла получена строка, интерпретировать ее как значение </b>

 // атрибута id элемента

 if (typeof n == "string") n = document.getElementByld(n);

 var parent = n.parentNode; // Ссылка на родителя элемента n

 var b = document.сreateElement("b"); // Создать элемент 

 parent.replaceChild(b, n); // Заменить n элементом 