Creating a Dynamic Table of Contents with JavaScript: Improve Website Navigation and Enhance SEO

[Everlasting Summer 13]

This JavaScript code generates a dynamic table of contents (TOC) for a webpage based on the heading elements (h1 to h6) within the content wrappers. The generated TOC is a nested unordered list (ul) that reflects the hierarchy of the headings on the page, and is appended to the body of the page.

Here's a step-by-step description of what the code does:

1. The generateTOC() function is defined.
2. Inside the function, all elements with the class .cPost_contentWrap are selected using querySelectorAll. Specify the container class of your content here instead of .cPost_contentWrap.
3. A new unordered list (ul) element, toc, is created to serve as the table of contents container.
4. For each content wrapper, the function selects all heading elements (h1 to h6) within the wrapper.
5. For each heading element found, the following actions are performed: a. The heading level (1 to 6) is determined by extracting the number from the heading's tag name. b. A new list item (li) and anchor (a) elements are created. c. The anchor element's text content is set to the heading's text content, and its href is set to the heading's ID, creating a link to the heading. d. The anchor element is appended to the list item. e. A nested structure of unordered lists is built based on the heading level, and the list item is appended to the appropriate list.
6. After iterating through all the headings in all the content wrappers, the generated table of contents (toc) is appended to the body of the page.
7. Finally, the generateTOC() function is called, which creates and inserts the table of contents on the page.

The resulting table of contents provides an organized, clickable list of the headings on the page, allowing users to navigate through the content more easily. This also has the added benefit of improving the page's SEO by providing a structured navigation system for search engines to crawl and index.

function generateTOC() {
  const contentWrappers = document.querySelectorAll(".cPost_contentWrap"); // Specify the container class of your content here
  const toc = document.createElement("ul");

  contentWrappers.forEach((wrapper) => {
    const headings = wrapper.querySelectorAll("h1, h2, h3, h4, h5, h6");

    headings.forEach((heading) => {
      const level = parseInt(heading.tagName.slice(1));
      const listItem = document.createElement("li");
      const anchor = document.createElement("a");

      anchor.textContent = heading.textContent;
      anchor.href = `#${heading.id}`;
      listItem.appendChild(anchor);

      let currentList = toc;
      for (let i = 1; i < level; i++) {
        if (!currentList.lastElementChild || currentList.lastElementChild.tagName !== "LI") {
          currentList.appendChild(document.createElement("li"));
        }

        if (
          !currentList.lastElementChild.firstElementChild ||
          currentList.lastElementChild.firstElementChild.tagName !== "UL"
        ) {
          currentList.lastElementChild.appendChild(document.createElement("ul"));
        }

        currentList = currentList.lastElementChild.firstElementChild;
      }

      currentList.appendChild(listItem);
    });
  });

  // Append the table of contents to the body of the page.
  document.body.appendChild(toc);
}

// Call the generateTOC function to create the table of contents
generateTOC();