javascript foreach with DOM

Question

i'm very new to JS so be nice haha, but i'm trying to create a table of contents on a page using the DOM.

const h2 = document.querySelectorAll('h2');
const toc = document.querySelector('#toc')
h2.forEach(heading => {
 toc.innerHTML = `<li><a href="">${heading}</a></li>`
})

it's not working how i would expect tbh. any help is appreaciated, i'm probably just being dumb

• Quentin: "it's not working how i would expect tbh" — Tell us what it is doing, not just what it isn't. Tell us what you expect, don't make us guess.
• tylerlecho: ah sorry, i expect it to go through the h2's, print them each out as an <li> on the DOM

Answer 1

I think something like this should work! Here's what I changed to get it to work:

• Use += instead of = for innerHTML. If you just use =, every time the forEach runs, it replaces the content. You're trying to create a list, so you want it to add on.
• Get the innerText from heading. heading is an element, so you have to go into it and get its text, or else what you display isn't going to look right.

const h2 = document.querySelectorAll('h2');
const toc = document.querySelector('#toc')
h2.forEach(heading => {
 toc.innerHTML += `<li><a href="">${heading.innerText}</a></li>`
})

<ul id="toc"></ul>
<h2>One</h2>
<h2>Two</h2>

• Utkarsh Dixit: A word of caution: innerHTML is usually a bad practice and also not good for performance. stackoverflow.com/questions/11515383/…

Answer 2

Regarding @Utkarsh Dixit comment: This is much more performant and is creating the same result.

const h2 = document.querySelectorAll('h2');
const toc = document.querySelector('#toc')
h2.forEach(heading => {
 // Create two elements
 const li = document.createElement('li')
 const anchor = document.createElement('a')
 // Assign the text content to the anchor
 anchor.textContent = heading.textContent
 // Add them together toc > li > anchor
 li.append(anchor)
 toc.append(li)
})

<ul id="toc"></ul>
<h2>One</h2>
<h2>Two</h2>