在側面菜單和導航欄上加載相同的鏈接

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 頁面獲取更多信息