在侧面菜单和导航栏上加载相同的链接

Question

嘿，我有一个导航栏和一个侧面菜单，两者都应该加载相同的链接（我知道这是糟糕的设计，但它不取决于我）。

他们单独工作，但我无法让他们同时工作。

这是我的导航栏

<nav class="navbar">
    <a href="home.html"> Home </a>
    <a id="navAnchor"></a>
    <a href=""> Contact </a>
</nav>

这是我的侧边菜单

<div class="sidebar">
    <ul>
        <li><a href="home.html"> Páginal inicial</a></li>
        <li id="listAnchor"></li>
        <li>Contato</li>
    </ul>
</div>

这是 JS 加载来自我后端的链接 api

const categories = categoriesData.items;

      let list = document.getElementById("listAnchor");
      let navbar = document.getElementById("navAnchor");

      categories.forEach((element) => {
        let link = document.createElement("a");

        link.setAttribute("href", "//localhost:8888");
        link.innerHTML += element.name;

        //Here's the problem, navbar is loaded
        navbar.appendChild(link);
        
        // If I add these lines to load the side menu, navbar is not loaded
        let listItem = document.createElement("li");
        list.appendChild(listItem).appendChild(link);
      });

我试图创建函数来分别加载它们，但没有成功。 在 inte.net 上找不到类似的方法来解决这种情况。

在此先感谢，顺便说一句，我愿意接受任何关于我可以在这里做什么的建议，我对前端开发也有点陌生。

Answer 1

这实际上是预期的行为。 因为你首先创建了元素，并且比 append 给它一个父元素。 之后，您决定将 append 发送给另一位家长。

有一些方法可以克服这个问题，这是最简单的方法，无需更改整个代码。

 const categoriesData = { items: [ {name:"test1"}, {name:"test2"}, {name:"test3"}, ] } const categories = categoriesData.items; let list = document.getElementById("listAnchor"); let navbar = document.getElementById("navAnchor"); categories.forEach((element) => { let link = document.createElement("a"); link.setAttribute("href", "//localhost:8888"); link.innerHTML += element.name; //Here's the problem, navbar is loaded navbar.appendChild(link); // If I add these lines to load the side menu, navbar is not loaded let listItem = document.createElement("li"); // Just add.cloneNode function. list.appendChild(listItem).appendChild(link.cloneNode(true)); });

 <nav class="navbar"> <a href="home.html"> Home </a> <a id="navAnchor"></a> <a href=""> Contact </a> </nav> <div class="sidebar"> <ul> <li><a href="home.html"> Páginal inicial</a></li> <li id="listAnchor"></li> <li>Contato</li> </ul> </div>

添加cloneNode(true)将完成这项工作。 您可以从Mozilla 页面获取更多信息