> Faqs > Agregar un menú principal a través del DOM con Javascript sin usar createElement

Agregar un menú principal a través del DOM con Javascript sin usar createElement

Quiero agregar una barra de menu principal por medio del DOM usando document.CreateElement lo menos posible. Esto es lo que escribí y de todas formas la barra no aparece. Cúal es el error ?

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);

Respuestas

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
300 8 21 16
Gracias Victor