javascript document.innerHTML 设置整个文档的内容
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6758081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript document.innerHTML set content of whole document
提问by Web_Designer
How can I set the innerHTML
, or the whole content of an HTML document using javascript?
如何innerHTML
使用 javascript 设置 HTML 文档的全部或全部内容?
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:
但是浏览器会加载以下 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>
采纳答案by wchargin
If you don't want to use innerHTML you could use document.write(newDocument);
.
如果您不想使用 innerHTML,您可以使用document.write(newDocument);
.
If the document hasn't completely loaded, you'll need to put document.open()
as well (thanks ba?megakapa).
如果文档尚未完全加载,您还需要放入document.open()
(感谢 ba?megakapa)。
回答by Mathias Bynens
document.innerHTML
is new in HTML5 and isn't supported in all browsers.
document.innerHTML
是 HTML5 中的新增功能,并非所有浏览器都支持。
document.documentElement
refers to the root element of your document, which in this case is the <html>
element.
document.documentElement
指的是文档的根元素,在本例中是<html>
元素。
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
.
所以,你可以设置document.documentElement.innerHTML
. 请注意,由于 DOCTYPE 不在此范围内,因此无需将其包含在innerHTML
.
Example (try running this in your browser's JS console):
示例(尝试在浏览器的 JS 控制台中运行它):
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:
更新:document.innerHTML
从 HTML 规范转移到 DOM 解析和序列化规范,后来被删除。建议的替代方法是使用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.
不幸的是,在撰写本文时,大多数浏览器还不支持 HTML。
回答by fred727
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
现场示例:http: //www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open
hope this help ;)
希望这有帮助;)
回答by Matthieu Charbonnier
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.
请注意,它不会解释嵌入在您的 html 代码中的 js 代码。