Append to ul and li elements to make them appear in the DOM

Question

Hi I tried to append the li and a to make them appear in the DOM I tried to copy the text content but I don't know how to make the li and a appear in the new duplicated list. The second menu should be appear in the "smallNavArea"

<nav>
<ul id="primaryNavigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="location.html">Menu</a></li>
</ul>
</nav>
<nav id="smallNavArea"></nav>

function duplicateMenu() {

let Menu = document.querySelectorAll('ul#primaryNavigation li a')


Menu.forEach(menuList => {
    let Li_Element = document.createElement('li')
    let newLink_Element = document.createElement('a')
    newLink_Element .setAttribute('href', menuList.getAttribute('href'))
    let MenuText = document.getElementById('primaryNavigation').textContent 
    
})
}

duplicateMenu()

Answer 1

You need to create the UL in the destination DIV. Then you need to append the new link to the new LI, and append the new LI to the new UL.

function duplicateMenu() {

  let Menu = document.querySelectorAll('ul#primaryNavigation li a')
  let smallNav = document.querySelector("#smallNavArea");
  let newUL = document.createElement("ul");
  smallNav.appendChild(newUL);

  Menu.forEach(menuList => {
    let Li_Element = document.createElement('li')
    let newLink_Element = document.createElement('a')
    newLink_Element.setAttribute('href', menuList.getAttribute('href'))
    newLink_Element.innerHTML = menuList.innerHTML;
    Li_Element.appendChild(newLink_Element);
    newUL.appendChild(Li_Element);
  })
}

duplicateMenu()