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

Одна из особенностей объекта

DocumentFragment

состоит в том, что он позволяет манипулировать множеством узлов как единственным узлом: если объект

DocumentFragment

передать методу

appendChild(), insertBefore()

или

replaceChild(),

в документ будут вставлены дочерние элементы фрагмента, а не сам фрагмент. (Дочерние элементы будут перемещены из фрагмента в документ, а сам фрагмент опустеет и будет готов для повторного использования.) Следующая функция использует объект

DocumentFragment

для перестановки в обратном порядке дочерних элементов узла:

<b>// Выполняет перестановку дочерних элементов узла n в обратном порядке </b>

function reverse(n) {

 // Создать пустой объект DocumentFragment, который будет играть роль

 // временного контейнера

 var f = document.сreateDocumentFragment();

<b>  // Выполнить обход дочерних элементов в обратном порядке и переместить каждый</b>

<b>  // из них в объект фрагмента. Последний дочерний элемент узла n станет первым</b>

<b>  // дочерним элементом фрагмента f, и наоборот. Обратите внимание, что при добавлении</b>

<b>  // дочернего элемента в фрагмент f он автоматически удаляется из узла n. </b>

 while(n.lastChild) f.appendChild(n.lastChild);

 // В заключение переместить сразу все дочерние элементы 

 // из фрагмента f обратно в узел n. 

 n.appendChild(f);

}

В примере 15.6 представлена реализация метода

insertAdjacentHTML()

(раздел 15.5.1) с применением свойства

innerHTML

и объекта

DocumentFragment

. В нем также определяются функции вставки разметки HTML с более логичными именами, чем неочевидное

insertAdjacentHTML()

. Вложенная вспомогательная функция

fragment()

является, пожалуй, наиболее интересной частью этого примера: она возвращает объект

DocumentFragment

, содержащий разобранное представление указанной ей строки с разметкой HTML.

Пример 15.6. Реализация метода

insertAdjacentHTML()

с использованием свойства
innerHTML

// Этот модуль определяет метод Element.insertAdjacentHTML для броузеров,

<b>// не поддерживающих его, а также определяет переносимые функции вставки HTML,</b>

// имеющие более логичные имена, чем имя insertAdjacentHTML:

// Insert.before(), Insert.after(), Insert.atStart(), Insert.atEnd() 

var Insert = (function() {

<b>  // Если элементы имеют собственный метод insertAdjacentHTML, использовать </b>

<b>  // его в четырех функциях вставки HTML, имеющих более понятные имена, </b>

 if (document.createElement("div").insertAdjacentHTML) {

 return {

 before: function(e,h) {e.insertAdjacentHTML("beforebegin",h);},

 after: function(e,h) {e.insertAdjacentHTML("afterend",h);},

 atStart: function(e,h) {e.insertAdjacentHTML("afterbegin",h);},

 atEnd: function(e,h) {e.insertAdjacentHTMLC'beforeend",h);}

 };

 }

 // Иначе, в случае отсутствия стандартного метода insertAdjacentHTML,

<b>  // реализовать те же самые четыре функции вставки и затем использовать их </b>

 // в определении метода insertAdjacentHTML.

<b>  // Сначала необходимо определить вспомогательный метод, который принимает</b>

 // строку с разметкой HTML и возвращает объект DocumentFragment,

 // содержащий разобранное представление этой разметки

 function fragment(html) {

 var elt = document.createElement("div"); // Пустой элемент 

 var frag = document.createDocumentFragment(); // Пустой фрагмент 

 elt.innerHTML = html; // Содержимое элемента

 while(elt.firstChild) // Переместить все узлы

 frag.appendChild(elt.firstChild); // из elt в frag

 return frag; // И вернуть frag

 }

 var Insert = {

 before: function(elt, html) {

 elt.parentNode.insertBefore(fragment(html), elt):

 },

 after: function(elt, html) {

 elt.parentNode.insertBefore(fragment(html),elt.nextSibling);