Como anexar HTML de um documento carregado com AJAX?

Estou tentando anexar o conteúdo de um arquivo .html ao corpo da minha página principal. Basicamente, estou tentando criar um pedaço reutilizável de html que possa carregar em qualquer página com uma função JavaScript simples.

Aqui está o conteúdo da minha barra de navegação, o conteúdo que quero reutilizar:

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

Isso está em um arquivo chamado navbar.html

Agora, no meu principal index.html, quero importá-lo, fazendo algo assim:

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

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

Isso deve cuidar da importação do html em navbar.html.

O conteúdo do importHTML.js é 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);
}

Portanto, acho que minha pergunta é bem simples: como converter esse texto de resposta em um elemento HTML para que eu possa anexá-lo ao corpo?

questionAnswers(6)

yourAnswerToTheQuestion