How do I replace the entire HTML node using jQuery

Question

I have a string which looks like:

<html><head><title>example</title></head><body>some example text</body></html>

I get this string returned as a result to an AJAX request.

I would like the browser to render and display that string. The idea would be to do something like:

$('html').parent().html(myString);

Well, that doesn't work. I've attempted to use an IFRAME but I haven't figured out how to get that to work either.

Note: It is impossible for me to change this string. It is also impossible for me to regenerate this string in a subsequent call to the server (otherwise I could just redirect the browser to that url).

As far as I'm aware there's no parent for the html element, IE6 and IE7 excepted. (But they hardly count) So you need to look at operations which work directly on $('html') -- outerhtml sounds about right. — wombleton
– wombleton, Commented Aug 6, 2009 at 2:24

Jon Benedicto · Accepted Answer · 2012-09-04 16:47:21Z

141

The document.open/write/close methods will do what you want:

var newDoc = document.open("text/html", "replace");
newDoc.write(myString);
newDoc.close();

Unless you pass in the replace parameter, the document.open call adds page history. So users would have to click back twice to go to the previous page.

edited Sep 4, 2012 at 16:47

answered Aug 6, 2009 at 0:12

Jon Benedicto

10.6k3 gold badges31 silver badges31 bronze badges

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

7 Comments

Ken Browning Over a year ago

Thanks, this works perfectly. Do you happen to know if this behaves differently in any non-ie browsers?

Jon Benedicto Over a year ago

Since these have been part of the DOM for a very long time, I'd expect them to work correctly across all modern browsers.

user2160375 Over a year ago

Hey, currently there is a problem with firefox and hard refresh when using solution. Is there a workaround nowadays?

Johncl Over a year ago

Can you open a new window and show the content there?

Rudolf Dvoracek Over a year ago

This solution works for me in W7/MF, but when executing statement newDoc.write(myString) I receive Permission denied error in W7/IE with error number number -2146828218.

|

Marius · Accepted Answer · 2009-08-06 00:08:38Z

16

You could just strip out the html tags, and then put everything inside the html element:

$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1"));

answered Aug 6, 2009 at 0:08

Marius

59.2k35 gold badges137 silver badges151 bronze badges

2 Comments

Ken Browning Over a year ago

Thanks but this doesn't work. No matter what value I try, the result of $('html').html(somevalue) is a blank page with an empty DOM (in IE).

inf3rno Over a year ago

No need for stripping $("html").html(myString) does it automatically.

grssn · Accepted Answer · 2016-07-01 12:21:54Z

At least in firefox(47.0) the solution:

var newDoc = document.open("text/html", "replace");
newDoc.write(response);
newDoc.close();

does not work as suggested since pressing the back button on firefox still loads the previous history entry - i.e. the entire point of using "replace" is to avoid having users click their back button only to be greeted by the view of the page before the last time the document.write() was called. The way of doing this that does not cause the aforementioned effect is simply calling methods on the document object directly:

document.open("text/html", "replace");
document.write(response);
document.close();

Using the replace option not only avoids filling the users history with garbage, but also helps in dealing with the issues that arise from the weird ways in which browsers often handle the history entries created by javascript, as sometimes allowing the browser to log the changes made to the document by javascript in history might have unexpected results when handling the back/forward operations (for instance adding 'wyciwyg://(somenumber)' to the url after performing a document.write() on the document that had its history reverted to a previous state).

emtrane · Accepted Answer · 2010-12-16 17:51:48Z

3

Another variation to try might be

$('html').replaceWith(myString);

http://api.jquery.com/replaceWith/

answered Dec 16, 2010 at 17:51

emtrane

1,0591 gold badge8 silver badges10 bronze badges

4 Comments

Aram Kocharyan Over a year ago

Note that this replaces the jQuery object as well, so if you're keeping references you need to update them.

inf3rno Over a year ago

Does not work. HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy in firefox.

Mauro Over a year ago

Almost the same result as inf3rno => Node cannot replace itself

Rafael Xavier Over a year ago

Using chrome I got this error:Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': Nodes of type '#document-fragment' may not be inserted inside nodes of type '#document'.

Serg · Accepted Answer · 2018-12-31 13:00:42Z

1

document.documentElement.innerHTML = myString;

It works except for IE9.

edited Dec 31, 2018 at 13:00

answered Dec 31, 2018 at 12:26

Serg

7,5954 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

How do I replace the entire HTML node using jQuery

5 Answers 5

7 Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related