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

 },

 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: создает оглавление документа.

*

<b>* Этот модуль регистрирует анонимную функцию, которая вызывается</b>

<b>* автоматически по окончании загрузки документа. Эта функция сначала</b>

<b>* отыскивает элемент документа с атрибутом id=&quot;TOC&quot;. Если такой элемент</b>

<b>* отсутствует, функция создает его, помещая в начало документа.</b>

*

<b>* Затем функция отыскивает все элементы с &lt;h1&gt; по &lt;h6&gt;, интерпретируя их как</b>

<b>* заголовки разделов и создает оглавление внутри элемента ТОС. Функция добавляет</b>

<b>* номера разделов в каждый заголовок и обертывает заголовки именованными</b>

<b>* якорными элементами, благодаря чему оглавление может ссылаться на них.</b>

<b>* Якорным элементам даются имена, начинающиеся с приставки &quot;ТОС&quot;, поэтому вам следует</b>

* избегать использовать эту приставку в своей разметке HTML.

*

<b>* Оформление элементов оглавления можно реализовать с помощью CSS. Все элементы имеют</b>

<b>* класс &quot;TOCEntry&quot;. Кроме того, каждый элемент оглавления имеет класс, соответствующий</b>

<b>* уровню заголовка раздела. Для заголовков, оформленных тегом &lt;h1&gt;, создаются элементы</b>

<b>* оглавления с классом &quot;TOCLevell&quot;,для заголовков &lt;h2&gt; - с классом &quot;T0CLevel2&quot; и т. д.</b>

<b>* Номера разделов, вставляемые в заголовки, получают класс &quot;TOCSectNum&quot;.</b>

*

<b>* Этот модуль можно использовать с каскадными таблицами стилей, такими как:</b>

*

* #Т0С { border: solid black 1рх; margin: Юрх; padding: Юрх; }

* .TOCEntry { font-family: sans-serif; }

* .TOCEntry a { text-decoration: none; }

* .TOCLevell { font-size: 16pt; font-weight: bold; }

* .T0CLevel2 { font-size: 12pt; margin-left: .5in; }

* .TOCSectNum:after { content: "; }

*

<b>* Последнее определение генерирует двоеточие и пробел после номера раздела.</b>

<b>* Чтобы скрыть номера разделов, можно использовать следующий стиль:</b>

*

* .TOCSectNum { display: none }

*

* Этот модуль использует вспомогательную функцию onLoad().

**/

<b>onLoad(function() { // Анонимная функция, определяющая локальн. обл. видимости </b>

// Отыскать контейнерный элемент для оглавления.

<b>// Если такой элемент отсутствует, создать его в начале документа,</b>

 var toc = document.getElementById("TOC");

 if (!toc) {

 toc = document.createElementC'div");

 toc.id = "TOC";

 document.body.insertBefore(toc, document.body.firstChild);

 }