javascript - 如何在 Javascript 中通过 标签包装列表项？

Question

我在 HTML 页面中有这个列表，我想根据 HTML 页面中的部分数量创建动态导航栏菜单

 <ul id="navbar__list">
    ....
 </ul>

当我在 js 文件中编写这段代码时

const LIST = document.querySelector("#navbar__list");
const SECTION = document.querySelectorAll("section");
SECTION.forEach((sec) => {
  let id_name = sec.getAttribute("id");
  let atr_data = sec.getAttribute("data-nav");
  const NAV_LIST_ITEMS = document.createElement("li");
  NAV_LIST_ITEMS.textContent = atr_data;
  const NAV_LIST_ANCHOR = document.createElement("a");
  NAV_LIST_ANCHOR.setAttribute("href", "#" + id_name);
  const full_list_link = NAV_LIST_ANCHOR.appendChild(NAV_LIST_ITEMS);
  LIST.appendChild(full_list_link);
});

结果变成了这样

<ul id="navbar__list">
    <li>Section 1</li>
    <li>Section 2</li>
    <li>Section 3</li>
</ul>

我想要这样的最终代码

<ul id="navbar__list">
<a href="https://www.w3schools.com"><li>Section 1</li></a>
<a href="https://www.w3schools.com"><li>Section 2</li></a>
<a href="https://www.w3schools.com"><li>Section 3</li></a>
</ul>

Answer 1

您想要的结构是不可能的，因为它不是有效的 HTML。 <ul>和 <ol>元素只能有 <li>元素作为它们的直接后代。考虑将链接放在列表项内。

const LIST = document.querySelector("#navbar__list");
const SECTION = document.querySelectorAll("section");
SECTION.forEach((sec) => {
  let id_name = sec.getAttribute("id");
  let atr_data = sec.getAttribute("data-nav");
  const NAV_LIST_ITEMS = document.createElement("li");
  const NAV_LIST_ANCHOR = document.createElement("a");
  NAV_LIST_ANCHOR.setAttribute("href", "#" + id_name);
  NAV_LIST_ANCHOR.textContent = atr_data;
  NAV_LIST_ITEMS.appendChild(NAV_LIST_ANCHOR);
  LIST.appendChild(NAV_LIST_ITEM);
});

这应该生成(基于您自己的示例)以下代码:

<ul id="navbar__list">
  <li><a href="https://www.w3schools.com">Section 1</a></li>
  <li><a href="https://www.w3schools.com">Section 2</a></li>
  <li><a href="https://www.w3schools.com">Section 3</a></li>
</ul>

脚注: JavaScript 中的约定是使用 camelCase用于变量和 UPPERCASE对于常量:

const WHITE = '#ffffff'; // Immutable string.
const navListItem = document.createElement("li"); // Is an object with mutable properties.