I am trying to generate an unordered list and also navigation bar using JavaScript.
This is the JS snippet I have (looping through an Array using a forEach method):
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);
});
I also want to rewrite this function somehow since I took it straight off from a github repo that I am not comfy taking straight off.
function createNavItemHTML(id, name) {
const itemHTML = `<a class ="menu__link" data-id="${id}">${name}</a>`;
return itemHTML;
}
I simply want to include an anchor tag in my unordered list for each list item. But cannot get it to work...
Thanks in advance.
You can simplify your code alot:
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);
};