Table of Contents, Automatic Heading Link List Generation

Add an element with a unique ID (toc-container in this example) to your HTML where you want the table of contents.

document.addEventListener("DOMContentLoaded", function() {
    // Select all h2 and h3 elements
    const headers = document.querySelectorAll("h2, h3");

    // If there are no headers, exit the function
    if (headers.length === 0) {

    // Find the specified container for the table of contents
    const tocContainer = document.getElementById("toc-container");
    if (!tocContainer) {
        console.error("Table of contents container not found.");

    // Create a container for the table of contents
    const toc = document.createElement("div"); = "table-of-contents";
    toc.innerHTML = "<div class='toc-title'>Table of Contents</div>";

    // Create an unordered list for the links
    const list = document.createElement("ul");

    // Iterate over the headers and create list items with links
    headers.forEach((header, index) => {
        // Assign a unique ID to each header = "heading-" + index;

        // Create a list item and a link for the table of contents
        const listItem = document.createElement("li");

        // Add class to listItem based on header tag name (h2 or h3)
        if (header.tagName === 'H2') {
            listItem.className = 'h2';
        } else if (header.tagName === 'H3') {
            listItem.className = 'h3';

        const link = document.createElement("a");
        link.href = "#" +;
        link.innerText = header.textContent;

        // Append the list item to the unordered list

    // Append the unordered list to the table of contents container

    // Optional: Add smooth scrolling
    list.addEventListener("click", function(event) {
        if ( === "A") {
            const targetId ="href").slice(1);
                behavior: "smooth"


See the Pen table of contents native js example, article title list by sinanisler (@sinanisler) on CodePen.

Leave the first comment