Login/Register
javascript document.innerHTML set content of whole document
Asked Answered
Solved javascripthtmldominnerhtml
C

4

42

How can I set the innerHTML, or the whole content of an HTML document using javascript?

For example my document would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-language" content="en"/>
    <title>Webpage Generator</title>
    <script type="text/javascript">
    var newDocument = "&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; \n\t&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Greetings!&lt;/title&gt;\n&lt;/head&gt;\n&lt;body&gt;\n\t&lt;p&gt;Howdy!&lt;/p&gt;\n&lt;/body&gt;\n&lt;/html&gt;";
    document.innerHTML = newDocument;
    </script>
</head>
<body>
</body>
</html>

But the browser would load the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Greetings!</title>
</head>
<body>
    <p>Howdy!</p>
</body>
</html>
Christcross answered 20/7, 2011 at 6:53 Comment(5)
What problem are you trying to solve by setting document.innerHTML? – Granary
Why not replacing simply the body ? – Absurd
@Absurd I want to replace the whole document. Including the doctype. – Christcross
I don't really see a point in this. – Shrieve
@bazmegakapa I know this is really a server-side type of job, but I was just curious to what extent it could be done in javascript. – Christcross
S
34

If you don't want to use innerHTML you could use document.write(newDocument);.

If the document hasn't completely loaded, you'll need to put document.open() as well (thanks bažmegakapa).

Signatory answered 20/7, 2011 at 7:0 Comment(3)
This just appends newDocument onto the current document rather than replacing it. – Christcross
@inquisitive If you're running this command after the document has loaded, it will issue a document.open() call as well. So basically everything will be cleared. jsFiddle Demo – Shrieve
@inquisitive_web_developer Like I said in the comments on my answer, it works the way you want it to if you do it after the document is loaded (e.g. window.onload). – Macaluso
M
32

document.innerHTML is new in HTML5 and isn’t supported in all browsers.

document.documentElement refers to the root element of your document, which in this case is the <html> element.

So, you could set document.documentElement.innerHTML. Note that since the DOCTYPE falls outside of that, so there’s no need to include that in the innerHTML.

Example (try running this in your browser’s JS console):

document.documentElement.innerHTML = '<title>Test</title><p>LOLWAT';

Update: document.innerHTML moved from the HTML specification to the DOM Parsing and Serialization spec, and later got removed. The suggested alternative is to use DOMParser:

var doc = (new DOMParser).parseFromString('<!doctype html><title>wat</title>', 'text/html');

Unfortunately, at the time of writing, most browsers don’t support this yet for HTML.

Macaluso answered 20/7, 2011 at 6:57 Comment(4)
This could be helpful, but is there a way to replace not only the innerHTML of the <html> element, but the whole document including the doctype? – Christcross
@inquisitive_web_developer You could use something like window.onload = function() { document.write('lol'); }; which would pave over the entire document. Or you could use a frame/iframe, which seems to be a better solution than what you’re doing now. – Macaluso
@Mathias Bynens your method using window.onload is quite clever as it sets the content of the document before it has loaded, and thus it replaces the original HTML with the new document rather than appending the new document onto the loaded html page. Thanks +1! – Christcross
@inquisitive_web_developer Actually, it sets it after the document has loaded, which is why it overwrites the original HTML. – Macaluso
M
15

Use this code (after current document has been loaded) :

document.open("text/html", "replace");
document.write(htmlCode);  // htmlCode is the variable you called newDocument
document.close();

Live exemple here : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

hope this help ;)

Misdemeanor answered 8/10, 2015 at 15:49 Comment(1)
Yeah but be careful because some browsers (IE and Firefox) will consider htmlCode like the new page itself, so if you hit F5, the browser will not refresh the original page, but this htmlCode. If you want F5 still working, see my answer. – Brandebrandea
B
4

Simple:

document.body.parentElement.innerHTML = '<html><body><div>Your code</div></body></html>';

Note that it will not interpret js code embedded in your html code.

Brandebrandea answered 12/7, 2017 at 21:3 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.