Menu
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 = "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" \n\t"http://www.w3.org/TR/html4/loose.dtd">\n<html>\n<head>\n\t<title>Greetings!</title>\n</head>\n<body>\n\t<p>Howdy!</p>\n</body>\n</html>"; 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> 
655
To set the value of innerHTML property, you use this syntax: element. innerHTML = newHTML; The setting will replace the existing content of an element with the new content.
The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies.
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
A string containing the HTML serialization of the element's descendants. Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString.
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).
107
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
