How to replace entire HTML with external HTML?

Question

Let's say I have this page (page.html):

<html>
    <body>
    <h1>AAA</h1>
<script type="text/javascript">
    //<![CDATA[
$(document).ready(function() {

 $.get('page2.html', function(data){
  // I want to replace the entire HTML with the HTML of page2.html
  // but this doesnt' work
  $('html').replaceWith(data);
 });

});    //]]>
</script>
    </body>
</html>

Another page (page2.html):

<html>
    <body>
    <h1>BBB</h1>
    </body>
</html>

As you can see in my code snippet, I would like to fetch HTML from the page2.html and replace the entire content of page.html with the fetched response.

How to do that?

Andy E · Accepted Answer · 2010-09-13 10:40:47Z

7

You can use document.open() to create a new page, document.write() to write the data and then document.close() to complete:

document.open("text/html");
document.write(data);
document.close();

https://developer.mozilla.org/en/DOM/document.open

answered Sep 13, 2010 at 10:40

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard Knop Over a year ago

By the way this has some problems in IE (when page2.html has some javascript in it, it won't get executed).

fearofawhackplanet · Accepted Answer · 2010-09-13 10:48:05Z

0

Can't you just replace the html in the body tag with $('body').html(newContent)?

answered Sep 13, 2010 at 10:48

fearofawhackplanet

53.7k55 gold badges167 silver badges258 bronze badges

1 Comment

Richard Knop Over a year ago

No. The returned HTML is complete also with html, head and other tags. It is returned as plain text so I cannot easily extract just body contents from it.

Collectives™ on Stack Overflow

How to replace entire HTML with external HTML?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related