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
I think something like this should work! Here's what I changed to get it to work:
+= 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.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>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>