En tu ejemplo te falta la línea de código donde lo agregas al DOM de la página... tienes un append, pero no tienes que agregar la cadena de texto con las etiquetas, sino el elemento mainNav que has generado con tu script.
El ejemplo podría ser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title>
</head>
<body>
<h1>Esto es un ejemplo</h1>
<div id="insertnav"></div>
<p>Lorem ipsum...</p>
<script>
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;
document.getElementById('insertnav').append(mainNav);
</script>
</body>
</html>
Fíjate que el append lo hacemos sobre el elemento con id "insernav", que pones en el html en el lugar donde debe aparecer la barra.
Pero aún así tiene un poco más del código necesario. creo que con esto también sería suficiente, si lo que quieres es no usar ni un solo "createElement".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title>
</head>
<body>
<h1>Esto es un ejemplo</h1>
<div id="insertnav" class="main-navigation"></div>
<p>Lorem ipsum...</p>
<script>
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>
`;
document.getElementById('insertnav').innerHTML = navContent
</script>
</body>
</html>
Victor
252
7
17
10