javascript document.innerHTML устанавливает содержимое всего документа - PullRequest
Новая
       7

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

28 голосов
/ 20 июля 2011

Как мне установить 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>

Ответы [ 4 ]

27 голосов
/ 20 июля 2011

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

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

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

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

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

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

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

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

26 голосов
/ 20 июля 2011

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

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

11 голосов
/ 08 октября 2015

Используйте этот код (после загрузки текущего документа): 

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

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

3 голосов
/ 13 июля 2017

Простой: 

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

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

...