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

"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. — Quentin, Aug 21 '21 at 21:19
ah sorry, i expect it to go through the h2's, print them each out as an

score 4 · Accepted Answer · edited Aug 21 '21 at 21:26

4

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>

edited Aug 21 '21 at 21:26

Spectric

30,714
6
20
43

answered Aug 21 '21 at 21:21

Nisala

1,313
1
16
30

A word of caution: innerHTML is usually a bad practice and also not good for performance. https://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code – Utkarsh Dixit Aug 21 '21 at 21:24

score 1 · Answer 2 · answered Aug 21 '21 at 22:43

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>

javascript foreach with DOM

2 Answers2