2

Quiero crear un sistema simple de plantillas usando JavaScript puro, sin librerías de ningún tipo, para que se procese la página y luego con una función JavaScript simple pueda cargar las diferentes secciones de la página. Pero no consigo dar con la tecla para que funcione.

Tengo este código (simplificado):

document.querySelector("button").addEventListener("click", function() {
  if (document.querySelectorAll("#menu").length == 0) {
    var script = document.querySelector("#script-menu");
    var html = script.innerHTML;
    document.querySelector("body").appendChild(html);
  }
});
<button>Ir al menú</button>

<script type="text/html" id="script-menu">
  <div class="vista" id="menu">
    <ul>
      <li><a href="#">Opción 1</a></li>
      <li><a href="#">Opción 2</a></li>
      <li><a href="#">Opción 3</a></li>
    </ul>
  </div>
</script>

Pero cuando pulso el botón, en lugar de añadir el menú a la ventana, lo que hace es que me lanza este mensaje de error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Lo cual tiene sentido porque la variable html contiene una cadena de texto y no un Node. ¿Cómo puedo hacer para leer/procesar el contenido del script como si fuera un Node en lugar de una cadena?

1 respuesta 1

3

El método appendChild es para añadir nodos, no una cadena HTML. Si deseas añadir el template al body y reemplazar todo lo que se encuentra dentro de este, puedes usar innerHTML:

document.querySelector("body").innerHTML = html;

Pero si lo que deseas es añadir el contenido al final de lo que ya se encuentra en el body, puedes usar el método insertAdjacentHTML:

document.querySelector("body").insertAdjacentHTML("beforeend", html);

Aquí te dejo tu mismo snippet con la variación:

document.querySelector("button").addEventListener("click", function () {
  if (document.querySelectorAll("#menu").length == 0) {
    var script = document.querySelector("#script-menu");
    var html = script.innerHTML;
    document.querySelector("body").insertAdjacentHTML("beforeend", html);
  }
});
<button>Ir al menú</button>

<script type="text/html" id="script-menu">
  <div class="vista" id="menu">
    <ul>
      <li><a href="#">Opción 1</a></li>
      <li><a href="#">Opción 2</a></li>
      <li><a href="#">Opción 3</a></li>
    </ul>
  </div>
</script>

2
  • Perfecto. Es lo que buscaba, ¿sabes si el soporte para navegadores en Android/iOS es bueno?
    – Alvaro Montoro
    el 16 jul. 2017 a las 17:43
  • 1
    Sí, es soportado. insertAdjacentHTML es soportado por la mayoría de los navegadores. Aquí puedes ampliar más detalles.
    – ElChiniNet
    el 16 jul. 2017 a las 17:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.