Skip to main content Accessibility Feedback

Getting HTML asynchronously from another page (with native JavaScript)

On a recent project, I needed to load the form on a contact page in a modal window on a different page.

That’s typically something you’d turn to jQuery for, but I want to show you can achieve the same effect with native JavaScript.

Asynchronous HTML #

This approach uses XMLHttpRequest web API.

While this API is supported back to IE 7, HTML requests are only supported in IE10 and higher. The method below includes a feature test and won’t run in unsupported browsers.

 * Get HTML asynchronously
 * @param  {String}   url      The URL to get HTML from
 * @param  {Function} callback A callback funtion. Pass in "response" variable to use returned HTML.
var getHTML = function ( url, callback ) {

    // Feature detection
    if ( !window.XMLHttpRequest ) return;

    // Create new request
    var xhr = new XMLHttpRequest();

    // Setup callback
    xhr.onload = function() {
        if ( callback && typeof( callback ) === 'function' ) {
            callback( this.responseXML );

    // Get the HTML 'GET', url );
    xhr.responseType = 'document';


To replace the entire contents of a page with content from another, you would do this:

getHTML( '/about', function (response) { 
    document.documentElement.innerHTML = response.documentElement.innerHTML;

You can also get specific elements on the page by treating the response variable the same way you would the document element on any other page.

getHTML( '/about', function (response) { 
    var someElem = document.querySelector( '#some-elem' );
    var someOtherElem = response.querySelector( '#some-other-elem' );
    someElem.innerHTML = someOtherElem.innerHTML;

🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips