¿Cómo agrego HTML de un documento cargado con AJAX?

Question

Apr 05, 2016, 04:45 PM

¿Cómo agrego HTML de un documento cargado con AJAX?

Estoy tratando de agregar el contenido de un archivo .html al cuerpo de mi página principal. Básicamente, estoy tratando de hacer una porción reutilizable de html que pueda cargar en cualquier página con una simple función de JavaScript.

Aquí está el contenido de mi barra de navegación, el contenido que quiero reutilizar:

<div id = "navbar">
  <div class = "Tab">
    <h1>Home</h1>
  </div>
  <div class = "Tab">
    <h1>Contact</h1>
  </div
</div>

Eso está en un archivo llamado navbar.html

Ahora en mi index.html principal, quiero importarlo haciendo algo como esto:

<head>
  <script src = "importHTML.js" type = "text/javascript"></script>
</head>

<body>
  <script type = "text/javascript">
    importHTML("navbar.html");
  </script>
</body>

Eso debería encargarse de importar el html en navbar.html.

El contenido de importHTML.js es este:

function importHTML(url_) {
  var request = new XMLHttpRequest();

  request.addEventListener("load", function(event_) {
    //This is the problem line of code
    //How do I get the contents of my response to act like an element?  
    document.body.appendChild(this.responseText);
  }, false);

  xmlhttprequest.open("POST", url_, true);
  xmlhttprequest.send(null);
}

Entonces, supongo que mi pregunta es bastante simple: ¿cómo convierto ese texto de respuesta en un elemento HTML para poder agregarlo todo al cuerpo?