Replace entire page contents (with DOCTYPE)

Question

I know that this question has been asked before, but most answers only replaced the body tag, or needed jQuery. I want to be able to replace the entire page contents including the DOCTYPE using plain JavaScript. Also, I don't want to redirect the page with window.location.href. Take this simple page (index.html):

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <p>Testing...</p>
</body>

</html>

After loading another page with AJAX:

var page;
var file = new XMLHttpRequest();
file.open('GET', './toload.html');
file.onreadystatechange = function() {
  page = file.responseText;
}
file.send();

I want to erase my current page contents and display the contents of toload.html, which is:

<!DOCTYPE html>
<html>

<head>
  <title>Loaded</title>
</head>

<body>
  <p>Hello. This page is now loaded!</p>
</body>

</html>

How can I do this?

`document.write(page);` will do it. Is there any reason your not using an ajax framework? If you were to use JQuery you could do `$('html').html(page);` — Edward, Feb 22 '17 at 22:02
Possible duplicate of [Replacing Entire Page Including Head Using Javascript](http://stackoverflow.com/questions/4292603/replacing-entire-page-including-head-using-javascript) — Andy Ray, Feb 22 '17 at 22:02
@AndyRay I have read that page, but I don't think any of those methods also replace the DOCTYPE. — Nobody, Feb 22 '17 at 22:05
@Edward `document.write(page);` apparently doesn't have full browser compatibility. — Nobody, Feb 22 '17 at 22:05
@Edward Also, the jQuery method only changes the html content, not the entire page. — Nobody, Feb 22 '17 at 22:09
`document.write` was one of the first things added to the DOM. Where are you finding limited compatibility? Otherwise, you'd have to literally build the DOM manually, using DOM methods like: http://stackoverflow.com/q/8227612/215552 — Heretic Monkey, Feb 22 '17 at 22:36

score 3 · Answer 1 · answered Feb 22 '17 at 22:32

3

The closest I can get is:

document.getElementsByTagName('html')[0].innerHTML="";

Ill update this answer if I can find out why you can't clear the DOM's root node.

answered Feb 22 '17 at 22:32

Edward

1,806
5
26
36

score 1 · Accepted Answer · answered Feb 24 '17 at 01:15

Never mind. I decided I could just replace the content inside the <html> tags. The code I used was:

var contents = "Sorry : ( IMPORT FAILED...";
var file = new XMLHttpRequest();
file.open("GET", "/toload.html", false);
file.onreadystatechange = function() {
    contents = file.responseText;
}
file.send(null);
document.getElementsByTagName("html")[0].innerHTML = contents;

Thanks for your wonderful answers anyway!

score 0 · Answer 3 · answered Oct 22 '21 at 04:27

0

Just use document.write() ;

answered Oct 22 '21 at 04:27

user17216571

1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 22 '21 at 06:41
While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Nov 08 '21 at 21:26

Replace entire page contents (with DOCTYPE)

3 Answers3