CODEWITHSUNDEEP
javascripthtmldominnerhtml
Web_Designer
Web_Designer

Reputation: 74630

javascript document.innerHTML set content of whole document

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>

Upvotes: 43

Views: 82696

Answers (4)

Matthieu Charbonnier
Matthieu Charbonnier

Reputation: 2982

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.

Upvotes: 4

fred727
fred727

Reputation: 2844

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 ;)

Upvotes: 16

wchargin
wchargin

Reputation: 16047

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).

Upvotes: 35

Mathias Bynens
Mathias Bynens

Reputation: 149744

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.

Upvotes: 33

Related Questions