How do I overwrite an entire document with JavaScript

Question

This is not a duplicate question for these reasons:

I am asking about how to replace the entire HTML document with JavaScript without jQuery or any other fancy extensions to JavaScript. Some of the other questions that are similar to this question deal with specific things like AJAX or jQuery.
I am NOT asking about why document.write() only appends to the page. Perhaps the pure JavaScript solution I am looking for may incorporate that function, but it cannot only be that since it is inadequate by itself.

What I am looking to do is overwrite a webpage as it is displayed in the browser with only HTML. The function document.write() only appends whatever argument is passed to it to the document's body. The property document.documentElement.outerHTML can be read from, but unlike when it is used on a page's child elements, cannot be written to, and even if it could, it would leave the DOCTYPE untouched.

I am working on a bookmarklet, so this JavaScript would not run in the page, meaning there is no problem with the script being overwritten while it is running. It could also be run in the browser's developer tools.

As an example, suppose I have about:blank opened in my browser. The contents of the DOM would look like this:

<html>
    <head></head>
    <body></body>
</html>

I want to be able to overwrite it with whatever string I want. So, for instance, I could make it look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>This is an example.</p>
    </body>
 </html>

How can I achieve that sort of overwrite of a document?

From what I can see the only way to do it is to modify each section. I would suggest perhaps thinking of refactoring your code. — Jhecht, Dec 16 '16 at 18:10

score 2 · Answer 1 · answered May 19 '20 at 14:01

Try this:

function one() {
  document.write('<html><body><pre>the first html</pre></body></html>');
  document.close();    // this makes the difference
}
function two() {
  document.write('<html><body><pre>the second html</pre></body></html>');
  document.close();
}

Refer to linstantnoodles' answer in question document.write() overwriting the document?, the document.open is implicitly called before the document.write is called, but the document.close doesn't, and
document.write() when document is closed = rewrite the document;
document.write() when document is open = append to the document.

mhatch · Answer 2 · 2016-12-16T18:12:57.443

0

You can use document.implementation.createDocumentType to rewrite the doctype and document.getElementsByTagName to get the DOM elements, then rewrite with innerHTML and setAttribute.

var newDoctype = document.implementation.createDocumentType('html','-//W3C//DTD XHTML 1.0 Transitional//EN','http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdd');
    document.doctype.parentNode.replaceChild(newDoctype,document.doctype);
    document.getElementsByTagName('html')[0].setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');


var doc = document.getElementsByTagName('html')[0];
    doc.getElementsByTagName('head')[0].innerHTML = '<title>Example</title>';
    doc.getElementsByTagName('body')[0].innerHTML = '<p>This is an example.</p>';

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Edit:

Updated to include comments by Xweque and xmlns attribute.

edited Dec 16 '16 at 18:12

answered Dec 16 '16 at 17:53

mhatch

4,441
6
36
62

Nope. That cannot be used to rewrite the entire document. For one thing, it leaves the DOCTYPE untouched. – Melab Dec 16 '16 at 17:54
Why do you need to rewrite the doctype? – mhatch Dec 16 '16 at 17:56
http://stackoverflow.com/questions/3147750/how-can-i-change-the-doctype – Bob_Gneu Dec 16 '16 at 17:56
3

The DOCTYPE is a read-only property. It can be changed [as you can see here](http://stackoverflow.com/questions/3147750/how-can-i-change-the-doctype) however it will not actually update the DOCTYPE of the document. DOCTYPE is a [read-only property](https://developer.mozilla.org/en-US/docs/Web/API/Document/doctype) – Xweque Dec 16 '16 at 17:57
@mhatch Because it is what I desire to be able to do. – Melab Dec 16 '16 at 18:06
1

It can be "changed" in that when you check what doctype the document has it will be what you've made it but it will not change what the browser renders. This may wary but running tests in Chrome 56 and Firefox 50 confirms this. – Xweque Dec 16 '16 at 18:08
@mhatch It is so I can display the current page's document tree and then use my own DOCTYPE (XHTML) to display it. – Melab Dec 16 '16 at 18:19

score 0 · Answer 3 · answered May 15 '20 at 20:43

0

document.write('Some Text')

document.write rewrites the page's code.

answered May 15 '20 at 20:43

Justin Liu

581
6
21

How do I overwrite an entire document with JavaScript

3 Answers3