Javascript document.innerHTML задает содержание всего документа

Как я могу установить innerHTML или весь контент HTML-документа с помощью javascript?

Например, мой документ будет выглядеть так:

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

Ответы

Ответ 1

Если вы не хотите использовать innerHTML, вы можете использовать document.write(newDocument);.

Если документ не полностью загружен, вам нужно также поставить document.open() (спасибо bažmegakapa).

Ответ 2

document.innerHTML является новым в HTML5 и не поддерживается во всех браузерах.

document.documentElement относится к корневому элементу вашего документа, который в этом случае является элементом <html>.

Итак, вы можете установить document.documentElement.innerHTML. Обратите внимание: поскольку DOCTYPE выходит за пределы этого, поэтому нет необходимости включать это в innerHTML.

Пример (попробуйте запустить это в консоли JS-браузеров):

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

Обновление: document.innerHTML переместилось из спецификации HTML в спецификацию DOM Parsing and Serialization, а затем удален. Предлагаемая альтернатива заключается в использовании DOMParser:

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

К сожалению, на момент написания статьи большинство браузеров еще не поддерживали это для HTML.

Ответ 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

надеюсь, что эта помощь;)

Ответ 4

Простой:

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

Обратите внимание, что он не будет интерпретировать js-код, встроенный в ваш html-код.