Adding a Table of Contents with HTML

How do I build a Table of Contents generator for an HTML document with vanilla JavaScript?

https://www.phind.com/search?cache=w8dd4ju708gv2t7yqu9bmvdr

ANSWER | PHIND-34B MODEL

To build a Table of Contents (TOC) generator for an HTML document using vanilla JavaScript, you can follow these steps, inspired by the provided sources:

Define the TOC Structure: First, you need to decide where the TOC will be placed in your HTML document. This is typically within a <nav> element. You also need to decide which elements in your document will be included in the TOC. These are usually heading elements like <h1>, <h2>, <h3>, etc.

Create the TOC Function: The function createToc provided in 0 is a good starting point. This function takes a configuration object that specifies the content to scan for titles, the element where the TOC will be placed, and the types of title elements to include in the TOC.

Implement the TOC Function: The createToc function works by first adding a unique ID to each title element if it doesn’t already have one. It then creates a list (<ul>) for the TOC and populates it with list items (<li>) that link to each title element.

Integrate the TOC Function: To use the TOC function, you need to call it with the appropriate configuration. This can be done in a script tag in the head of your HTML document, as shown in 0. You need to specify the content to scan, the element where the TOC will be placed, and the types of title elements to include.

Here’s a simplified version of the createToc function and how to integrate it:

<!DOCTYPE html>
<html>
<head>
 <title>Table of Contents Generator</title>
 <script>
    function createToc(config) {
      const content = config.content;
      const tocElement = config.tocElement;
      const titleElements = config.titleElements;

      let tocElementDiv = content.querySelector(tocElement);
      let tocUl = document.createElement("ul");
      tocUl.id = "list-toc-generated";
      tocElementDiv.appendChild(tocUl);

      let tocElementNbr = 0;
      for (let i = 0; i < titleElements.length; i++) {
        let titleElement = content.querySelectorAll(titleElements[i]);
        titleElement.forEach(function (element) {
          element.classList.add("title-element");
          element.setAttribute("data-title-level", i + 1);
          if (!element.id) {
            element.id = "title-element-" + (++tocElementNbr);
          }
        });
      }

      let tocElements = content.querySelectorAll(".title-element");
      for (let i = 0; i < tocElements.length; i++) {
        let tocElement = tocElements[i];
        let tocNewLi = document.createElement("li");
        tocNewLi.classList.add("toc-element", "toc-element-level-" + tocElement.dataset.titleLevel);
        tocNewLi.innerHTML = '<a href="#' + tocElement.id + '">' + tocElement.innerHTML + "</a>";
        tocUl.appendChild(tocNewLi);
      }
    }

    document.addEventListener("DOMContentLoaded", function() {
      createToc({
        content: document.body,
        tocElement: "#my-toc-content",
        titleElements: ["h1", "h2", "h3"]
      });
    });
 </script>
</head>
<body>
 <nav id="my-toc-content"></nav>
 <h1 id="title-1">Title 1</h1>
 <p>Some content...</p>
 <h2 id="title-2">Title 2</h2>
 <p>Some more content...</p>
 <h3 id="title-3">Title 3</h3>
 <p>Even more content...</p>
</body>
</html>

This example demonstrates how to create a basic TOC generator. You can customize the createToc function and its configuration to suit your specific needs, such as changing the types of title elements included in the TOC or modifying the structure of the TOC itself.

I would like to use this to make a simple article publish tool with PHP, JS, and HTML. Stay tuned!

ANSWER | PHIND-34B MODEL

Leave a Reply Cancel reply