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

   // содержащий разобранное представление этой разметки
   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);
   },
   atStart: function(elt, html) {
   elt.insertBefore(fragment(html), elt.firstChild);
   },
   atEnd: function(elt, html) { elt.appendChild(fragment(html)); }
   };

   // Реализация метода insertAdjacentHTML на основе функций выше
   Element.prototype.insertAdjacentHTML = function(pos, html) {
   switch(pos.toLowerCase) {
   case "beforebegin": return Insert.before(this, html);
   case "afterend": return Insert.after(this, html);
   case "afterbegin": return Insert.atStart(this, html);
   case "beforeend": return Insert.atEnd(this, html);
   }
   };
   return Insert; // Вернуть четыре функции вставки
  });

15.7. Пример: создание оглавления

Пример 15.7 показывает, как динамически создавать оглавление документа. Он демонстрирует многие концепции работы с документом, описанные в разделах выше: выбор элементов, навигация по документу, установка атрибутов элементов, установка свойства innerHTML и создание новых узлов и вставку их в документ. Пример снабжен большим количеством комментариев, которые призваны облегчить понимание программного кода.

Пример 15.7. Автоматическое создание оглавления документа

  /**
  * TOC.js: создает оглавление документа.
  *
  * Этот модуль регистрирует анонимную функцию, которая вызывается
  * автоматически по окончании загрузки документа. Эта функция сначала
  * отыскивает элемент документа с атрибутом id="TOC". Если такой элемент
  * отсутствует, функция создает его, помещая в начало документа.
  *
  * Затем функция отыскивает все элементы с <h1> по <h6>, интерпретируя их как
  * заголовки разделов и создает оглавление внутри элемента ТОС. Функция добавляет
  * номера разделов в каждый заголовок и обертывает заголовки именованными
  * якорными элементами, благодаря чему оглавление может ссылаться на них.
  * Якорным элементам даются имена, начинающиеся с приставки "ТОС", поэтому вам следует
  * избегать использовать эту приставку в своей разметке HTML.
  *
  * Оформление элементов оглавления можно реализовать с помощью CSS. Все элементы имеют
  * класс "TOCEntry". Кроме того, каждый элемент оглавления имеет класс, соответствующий
  * уровню заголовка раздела. Для заголовков, оформленных тегом <h1>, создаются элементы
  * оглавления с классом "TOCLevell",для заголовков <h2> - с классом "T0CLevel2" и т. д.
  * Номера разделов, вставляемые в заголовки, получают класс "TOCSectNum".
  *
  * Этот модуль можно использовать с каскадными таблицами стилей, такими как:
  *
  * #Т0С { border: solid black 1рх; margin: Юрх; padding: Юрх; }
  * .TOCEntry { font-family: sans-serif; }
  * .TOCEntry a { text-decoration: none; }
  * .TOCLevell { font-size: 16pt; font-weight: bold; }