Как добавить несколько элементов в меню навигации с помощью Javascript?

Question

Я создал свое навигационное меню с этим кодом, но в нем отсутствует тег 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>

Вот мой текущий код I используется для создания навигации. Я не уверен, как добавить дополнительный тег 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>

Answer 1

Вы создадите li так же, как вы создаете a, используя createElement().

Добавьте 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>