Soy muy nuevo en JS, así que sé amable jaja, pero estoy tratando de crear una tabla de contenido en una página usando el DOM.
const h2 = document.querySelectorAll('h2'); const toc = document.querySelector('#toc') h2.forEach(heading => { toc.innerHTML = `<li><a href="">${heading}</a></li>` })no está funcionando como esperaría tbh. cualquier ayuda es apreciada, probablemente solo estoy siendo tonto
¡Creo que algo como esto debería funcionar! Esto es lo que cambié para que funcione:
+= en lugar de = para innerHTML. Si solo usa = , cada vez que se ejecuta forEach , reemplaza el contenido. Está tratando de crear una lista, por lo que desea que se agregue.innerText del heading . heading es un elemento, por lo que debe ingresar y obtener su texto, de lo contrario, lo que muestra no se verá bien. 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>Con respecto al comentario de @Utkarsh Dixit: Esto es mucho más eficaz y está creando el mismo resultado.
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>