Question

如何使用javascript设置innerHTML或HTML文档的全部内容？

例如，我的文档看起来像这样：

<!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>

但是浏览器会加载以下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>

Answer 1

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

document.documentElement指的是文档的根元素，在本例中是<html>元素。

因此，您可以设置document.documentElement.innerHTML。请注意，由于DOCTYPE不属于此范围，因此无需在innerHTML中包含该内容。

示例（尝试在浏览器的JS控制台中运行）：

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

更新： document.innerHTML已从HTML规范移至the DOM Parsing and Serialization spec，之后被删除。建议的替代方法是使用DOMParser：

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

不幸的是，在撰写本文时，大多数浏览器还不支持HTML。

Answer 2

如果您不想使用innerHTML，可以使用document.write(newDocument);。

如果文档没有完全加载，您还需要放置document.open()（感谢bažmegakapa）。

Answer 3

使用此代码（在加载当前文档后）：

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

现场举例： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

希望这有帮助;）

Answer 4

简单：

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

请注意，它不会解释html代码中嵌入的js代码。

javascript document.innerHTML设置整个文档的内容

4 个答案: