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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 23:04:12  来源:igfitidea点击:

javascript document.innerHTML set content of whole document

javascripthtmldominnerhtml

提问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 = "&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:

但是浏览器会加载以下 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.innerHTMLis new in HTML5 and isn't supported in all browsers.

document.innerHTML是 HTML5 中的新增功能,并非所有浏览器都支持。

document.documentElementrefers 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.innerHTMLmoved 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 代码。