如何使用 Javascript 向导航菜单添加多个元素？答案

【问题标题】：How to add multiple elements to a nav menu with Javascript?如何使用 Javascript 向导航菜单添加多个元素？
【发布时间】：2020-04-06 13:07:06
【问题描述】：

我用这段代码创建了我的导航菜单，但它缺少一个 li 标签。它只包含<ul><a>Menu 1</ul></a>，但我希望它有一个li标签，所以<ul><li><a>Section 1</ul></li></a>

这是我的代码目前的样子

<ul id="navbar__list">
<a class="menu-items" id="menu-1" href="#section1">Section 1</a>
<a class="menu-items" id="menu-2" href="#section2">Section 2</a>
<a class="menu-items" id="menu-3" href="#section3">Section 3</a>
<a class="menu-items" id="menu-4" href="#section4">Section 4</a>
</ul>

这是我用于创建导航的当前代码。我不确定如何使用此方法添加额外的 li 标签，或者我需要做其他事情

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

//Build the nav
items.forEach((item, i) => {
  const el = document.createElement("a");
  el.innerText = item;
  el.classList.add("menu-items");
  el.setAttribute("id", `menu-${i + 1}`);
  el.href = `#section${i + 1}`;
  navList.appendChild(el);
});

这就是 HTML 的样子，我有 4 个部分。这是第 1 节

<header class="page__header">
      <nav class="navbar__menu">
        <!-- Navigation starts as empty UL that will be populated with JS -->
        <ul id="navbar__list"></ul>
      </nav>
    </header>
    <main>
      <header class="main__hero">
        <h1>Landing Page</h1>
      </header>
      <section id="section1" data-nav="Section 1" class="active">
        <div class="landing__container">
          <h2>Section 1</h2>

【问题讨论】：

使用像基础或引导这样的框架来实现同样的效果会更好。如果您仍想创建自定义菜单，最好使用 react 或 vue 等前端框架。即使学习，首先学习正确的东西仍然是值得的。除非您正在构建自己的框架，否则没有理由在纯 javascript 中执行此操作。（作为评论发布，因为它是作为答案发布的）

标签： javascript html css reactjs

【解决方案1】：

您可以像创建a 一样使用createElement() 创建li。

将a 附加到新创建的li。

然后，将li 附加到ul。

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

//Build the nav
items.forEach((item, i) => {
  const el = document.createElement("a");
  el.innerText = item;
  el.classList.add("menu-items");
  el.setAttribute("id", `menu-${i + 1}`);
  el.href = `#section${i + 1}`;
  
  // Create a list item
  const li = document.createElement("li")
  // Append the anchor to the list item
  li.appendChild(el);
  
  // Append the list item to the list
  navList.appendChild(li);
});

<nav class="navbar__menu">
  <ul id="navbar__list"></ul>
</nav>

【讨论】：