How to Create Table of Contents Using JavaScript

You can create dynamic table of contents for any HTML document using JavaScript which can show the list of headings from h1 to h6 with links to the headings and make easier to navigate through the document.

In this post I am going to describe about the steps to Create Table of Contents Using JavaScript and about the JavaScript codes required to create dynamic table of contents.

To create this set of JavaScript codes for creating table of contents, at first you have to know the different JavaScript concepts like selecting elements, document traversal, setting element attributes, setting innerHTML property, creating nodes and inserting then into the document.

Steps to Create Table of Contents Using JavaScript

At first create window.onload function that runs automatically when the document finishes loading as given below.

window.onload=function(){

function getSelectedText(){
if (window.getSelection)
return window.getSelection().toString()+"
"+document.URL;
else if (document.selection)
 return document.selection.createRange().text+"
"+document.URL;
}
var toc=document.getElementById("TOC");
if(!toc) {
 toc=document.createElement("div");
 toc.id="TOC";
 document.body.insertBefore(toc, document.body.firstChild);
}

When the above function runs, it first looks for a document element with an id of "TOC". If there is no such element it creates on at the start of the document.

Add the following codes to the function to find all <h1> through <h6> tags and sets them as headings.

var headings;
if (document.querySelectorAll) 
headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");
else
headings=findHeadings(document.body, []);

Then recursively traverse the document body looking for headings using function: findHeadings(root, sects){ }

Initialize an array: var sectionNumber=[0,0,0,0,0,0]; that keeps track of section numbers and add section numbers to each section numbers to each section heading and wrap the headings in named anchors so that the TOC can link to them.

Write CSS code to style created table of contents. Where all entries have a class "TOCEntry" and the section headings from <h1> to <h6> have class name "TOCLevel1" to "TOCLevel6" and the section number inserted into headings have class "TOCSectNum".

Full CSS Code To Style Table of Contents

Here is a full CSS code within <style> </style> tag to style table of contents.

<style>
#TOC {border:solid black 1px; margin:10px; padding:10px;}
.TOCEntry{font-family:sans-serief;}
.TOCEntry a{text-decoration:none;}
.TOCLevel1{font-size:17pt; font-weight:bold;}
.TOCLevel2{font-size:16pt; font-weight:bold;}
.TOCLevel3{font-size:15pt; font-weight:bold;}
.TOCLevel4{font-size:14pt; margin-left:.25in;}
.TOCSectNum{display:none;}
</style>

Full JavaScript Code To Create Table of Contents

Here is a full JavaScript Code To Create Table of Contents within <script> </script> tag.

<script>
window.onload=function(){

function getSelectedText(){
if (window.getSelection)
return window.getSelection().toString()+"<br/>"+document.URL;
else if (document.selection)
 return document.selection.createRange().text+"<br/>"+document.URL;
}

var toc=document.getElementById("TOC");
if(!toc) {
 toc=document.createElement("div");
 toc.id="TOC";
 document.body.insertBefore(toc, document.body.firstChild);
}
var headings;
if (document.querySelectorAll) 
headings=document.querySelectorAll("h1, h2, h3, h4, h5, h6");
else
headings=findHeadings(document.body, []);

function findHeadings(root, sects){
 for(var c=root.firstChild; c!=null; c=c.nextSibling){
if (c.nodeType!==1) continue;
if (c.tagName.length==2 && c.tagName.charAt(0)=="H")
sects.push(c);
else
findHeadings(c, sects);
}
return sects;
}

var sectionNumbers=[0,0,0,0,0,0];

for(var h=0; h<headings.length; h++) {
 var heading=headings[h];

if(heading.parentNode==toc) continue;

var level=parseInt(heading.tagName.charAt(1));
if (isNaN(level)||level<1||level>6) continue;

sectionNumbers[level-1]++;
for(var i=level; i<6; i++) sectionNumbers[i]=0;

var sectionNumber=sectionNumbers.slice(0, level).join(".");

var span=document.createElement("span");
span.className="TOCSectNum";
span.innerHTML=sectionNumber;
heading.insertBefore(span, heading.firstChild);
heading.id="TOC"+sectionNumber;
var anchor=document.createElement("a");
heading.parentNode.insertBefore(anchor, heading);
anchor.appendChild(heading);

var link=document.createElement("a");
link.href="#TOC"+sectionNumber; 
link.innerHTML=heading.innerHTML;

var entry=document.createElement("div");
entry.className="TOCEntry TOCLevel" + level;
entry.appendChild(link);

toc.appendChild(entry);
}
};

</script>

You can see the preview of Table of contents generated by JavaScript code above. If you have any problem or difficulties while implementing the above JavaScript code, you are welcomed to mention on the comment session at the bottom this post.