How do I append HTML from a document loaded with AJAX?

Question

I am trying to append the contents of a .html file to the body of my main page. Basically, I am trying to make a reusable chunk of html that I can load into any page with a

Answer 1

Ajax HTML Injection

jQuery $.get() and JavaScript XMLHttpRequest()

This is a demonstration of 2 ways to inject, include, import, etc. There's 3 pages:

1. index.html
   • It has 2 links and 2 divs
2. data1.html
   • It's data will be imported to index.html by $.get()
3. data2.html
   • It's data will be imported to index.html by XMLHttpRequest()

I added jQuery to show the difference in complexity, but they do the same thing. The live demo is at the end of this mess.

jQuery $.get() Setup

HTML on index.html

div#data1 is the element that'll have the HTML of data1.html appended to it.

     

        Import data1.html by jQuery$.get()
     
     

jQuery on index.html

$('#import1').on('click', function(e) {
    e.preventDefault();
    $.get('data1.html', function(data) {
        $("#data1").html(data);
    });
});     

---

JavaScript XMLHttpRequest() Setup

HTML on index.html

div[data-x] is the element that'll have the HTML of data2.html appended to it.

    
        Import data2.html by JavaScriptXMLHttpRequest()
    

javaScript on index.html

          function xhr() {
             var tags, i, clone, file, xhttp;
             tags = document.getElementsByTagName("*");
             for (i = 0; i < tags.length; i++) {
               if (tags[i].getAttribute("data-x")) {
                 clone = tags[i].cloneNode(false);
                 file = tags[i].getAttribute("data-x");
                 xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                   clone.removeAttribute("data-x");
                   clone.innerHTML = xhttp.responseText;
                   tags[i].parentNode.replaceChild(clone, tags[i]);
                   xhr();
                 }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                return;
              }
            }
          }


     document.getElementById('import2').addEventListener('click', function(e) {
       e.preventDefault();
       xhr();
     }, false);

README.md

Plunker

Note: This demo relies on user interaction via anchor links. This of course is probably not exactly what you need. You probably want it automatically loaded, so the following modifications are needed:

jQuery

$(function() {
    $.get('data1.html', function(data) {
        $("#data1").html(data);
    });
});

JavaScript

(function xhr() {
        xhr();
             var tags, i, clone, file, xhttp;
             tags = document.getElementsByTagName("*");
             for (i = 0; i < tags.length; i++) {
               if (tags[i].getAttribute("data-x")) {
                 clone = tags[i].cloneNode(false);
                 file = tags[i].getAttribute("data-x");
                 xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                   clone.removeAttribute("data-x");
                   clone.innerHTML = xhttp.responseText;
                   tags[i].parentNode.replaceChild(clone, tags[i]);
                   xhr();
                 }
                }
                xhttp.open("GET", file, true);
                xhttp.send();
                return;
              }
            }
          })();