'Is this an effective way to add a navbar through the DOM?

I am trying to add a navigation bar through the DOM straight from an uppended formula without having to use document.createElement. So far this is what I wrote and yet the formula is not showing, what is it wrong about this?

const navContent = `

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

`;

const mainNav = document.createElement("div");
mainNav.classList.add("main-navigation");
mainNav.innerHTML = navContent;
mainNav.append(navContent);



Solution 1:[1]

Try changing your last line to

document.documentElement.append(mainNav)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jack Fleeting