Как с помощью JavaScript создать оглавление для статей на сайте?

В этой статье разберём рецпет создания простого скрипта на JavaScript для динамического создания оглавления (содержания) к статьям на сайте.

Шаги по созданию оглавления для сайта

Основные действия по созданию списка заголовков на JavaScript с использованием jQuery:

1. Выбираем элементы, на основании которых нужно создать оглавление. Например, это элементы h2 расположенные в элементе .article:

var headers = $('.article h2');

2. Создаём элемент, который будет представлять наше оглавление. Например, нумерованный список:

var output = $('<ol>');

3. Переберём все элементы, из которых нужно создать оглавление с помощью метода each:

headers.each(function (index) {
  // ...
}

В этом коде index – это индекс элемента в наборе headers.

4. Добавим к h2 свойство id, если у него его нет:

if (this.id === '') {
  this.id = 'id-' + index;
}

Ключевое слово this указывает на текущий элемент набора headers.

5. Добавим в ol элемент, содержащий один пункт оглавления. Это будет li, внутрь которого помещена ссылка с текстом этого заголовка. С помощью ссылки можно будет перейти к этому разделу.

Код:

output.append($('<li>').append(
  $('<a>', { href: location.href.split('#')[0] + '#' + this.id }).text($(this).text()))
);

6. Вставим полученное оглавление в нужное место страницы. Например, после h1:

$('h1').after(
  $('<div>', { class: 'article-contents' })
    .append($('<div>', { style: 'font-weight: bold;' }).text('Содержание:'))
    .append(output)
);

Скрипт для создания оглавления на JavaScript с использованием jQuery

Итоговый скрипт:

var
  headers = $('.article h2'),
  output = $('<ol>');
headers.each(function (index) {
  if (this.id === '') {
    this.id = 'id-' + index;
  }
  output.append($('<li>').append(
    $('<a>', { href: location.href.split('#')[0] + '#' + this.id }).text($(this).text()))
  );
});
$('h1').after(
  $('<div>', { class: 'article-contents' })
    .append($('<div>', { style: 'font-weight: bold;' }).text('Содержание:'))
    .append(output)
);

Скрипт для автоматической генерации содержания без использования jQuery

Тот же самый скрипт, но без использования jQuery:

var
  output = document.createDocumentFragment(),
  headers = document.querySelectorAll('.article h2'),
  wrapper = document.createElement('div'),
  title = document.createElement('div'),
  ol = document.createElement('ol'),
  h1 = document.querySelector('h1');
wrapper.classList.add('article-content');
title.style.fontWeight = 'bold';
title.textContent = 'Содержание:';
output.appendChild(wrapper);
wrapper.appendChild(title);
wrapper.appendChild(ol);
headers.forEach(function (item, index) {
  var
    li = document.createElement('li'),
    link = document.createElement('a');
  if (item.id === '') {
    item.id = 'id-' + index;
  }
  link.href = location.href.split('#')[0] + '#' + item.id;
  link.textContent = item.textContent;
  li.appendChild(link);
  ol.appendChild(li);
});
h1.after(output);

Скрипт для генерации содержания страницы с подсветкой пунктов

Пример, в котором показано как можно программно создать содержание для страницы с подсветкой пунктов и плавным скроллом:

Указание активного пункта в содержании осуществляется посредством добавления к нему (элементу li) класса active.

<div class="article-contents">
  ...
  <ul>
    <li>...</li>
    <li>...</li>
    <!-- активный пункт к меню -->
    <li class="active">...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>