Load same links on side menu and nav bar

Question

Hey I got a navbar and a side menu, both should load the same links (I know it's poor design but it's not up to me).

They work alone, but I can't get them to work the same time.

This is my navbar

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

This is my side menu

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

This is the JS to load the links that come front my backend 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);
      });

I've tried to create functions to load them separately, but it didn't work. Couldn't find anything similar to solve this situation on the inte.net.

Thanks in advance, btw I'm open to any suggestion of what I could do here, I'm kinda new to front end development too.

Answer 1

This actually is the expected behaviour. Because you first create element, and than append it to a parent. And after that you decide to append it to another parent.

There are some ways to overcome this, this is the simpliest without changing your entire code.

 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>

Adding cloneNode(true) will do the job. You can get more info fromMozilla Page