Estoy tratando de generar una lista desordenada y también una barra de navegación usando JavaScript.
Este es el fragmento de JS que tengo (recorriendo un Array usando un método forEach):
const navMenu = document.querySelectorAll("page_header"); const navList = document.getElementById("menu_list"); const items = Array.from(document.querySelectorAll("section")); items.forEach((item, i) => { const listItem = document.createElement("li"); listItem.classList.add("menu-item"); const anchorTag = document.createElement("a"); anchorTag.innerText = item; const sectionName = item.getAttribute('data-nav'); const sectionID = item.getAttribute('id'); listItem.innerHTML = createNavItemHTML(sectionID, sectionName); navList.appendChild(listItem); });También quiero reescribir esta función de alguna manera, ya que la tomé directamente de un repositorio de github que no me siento cómodo sacando de inmediato.
function createNavItemHTML(id, name) { const itemHTML = `<a class ="menu__link" data-id="${id}">${name}</a>`; return itemHTML; }Simplemente quiero incluir una etiqueta de anclaje en mi lista desordenada para cada elemento de la lista. Pero no puedo hacer que funcione...
Gracias por adelantado.
Puedes simplificar mucho tu código:
const navList = document.getElementById("menu_list"); const sections = document.querySelectorAll("section"); for (const section of sections) { const li = document.createElement("li"); li.className = "menu-item"; const a = document.createElement("a"); a.textContent = section.dataset.nav; a.href = `#${section.id}`; li.appendChild(a); navList.appendChild(li); };