jQuery - load html response into whole page

Question

In my ajax code, I get a html response. How can I replace the whole page to this html response? I only find window.location.href , which only can redirct url response.

My code:

$('#btn').click(function(){
    $.ajax({
        url: '/someurl',
        data: {'key': value},
        type: 'POST',
        success: function(html_data) {
            # how to load this html_data into the whole page?
        },
        error: ...
    });
 });

Answer 1

jQuery replaceWith should get it done for you ;)

$( "html" ).replaceWith( data );

Where data is html received from server...

Entire code will look something like this...

$.get( "example.com/fileToLoad.html", function( data ) {
  $( "html" ).html( data );
});

Learn more about jQuery here...

http://jquery.com/

Answer 2

window.document is an object containg whole DOM.

Try writing in console window.document and you will see whole structure of a page you're on. If you want only the body element then you can find it by tag and replace what's inside of it.

EDIT 1:

Actually you;re right. I didn't test it.

But you can do that by:

document.open();
document.write(your_html);
document.close();

Tested in console.