Create table of contents automatically with javascript

December 7, 2022

I want to make a table of contents at the top of my page so that users can navigate to different areas more easily. I want this to be procedual incase I need to make a table of contents on 100 different pages. I want to code this in javascript.

html:

<body>
  <div class="contents">
  </div>
  <h1>Heading 1</h1>
  <h1>Heading 2</h1>
  <h1>Heading 3</h1>
  <h1>Heading 4</h1>
  <h1>Heading 5</h1>
</body>

I want the div ‘contents’ to be filled with anchor tags which point to the different headings

>Solution :

To create a table of contents using JavaScript, you can follow these steps:

Use the document.querySelectorAll() method to select all of the elements on the page. This method returns a NodeList of the selected elements.
Iterate over the NodeList using a for loop, and for each element, create an anchor element using the document.createElement() method.
Set the href attribute of the anchor element to the ID of the corresponding element. You can set the ID of each element using the id attribute in the HTML.
Set the text of the anchor element to the text content of the corresponding element. You can get the text content of an element using the textContent property.
Append the anchor element to the element using the appendChild() method.
Here is an example of how this could be implemented in JavaScript:

// Select all of the <h1> elements on the page
const headings = document.querySelectorAll('h1');

// Get the <div class="contents"> element
const contentsDiv = document.querySelector('.contents');

// Iterate over the <h1> elements
for (const heading of headings) {
  // Create an anchor element
  const anchor = document.createElement('a');

  // Set the href attribute of the anchor to the ID of the <h1> element
  anchor.href = `#${heading.id}`;

  // Set the text of the anchor to the text content of the <h1> element
  anchor.textContent = heading.textContent;

  // Append the anchor to the <div class="contents"> element
  contentsDiv.appendChild(anchor);
}

In this example, we assumed that each element has an id attribute set in the HTML, and we used that id to set the href attribute of the corresponding anchor element. You can adjust this example as needed to fit your specific use case.