web-dev-qa-db-ja.com

javascript document.innerHTMLはドキュメント全体のコンテンツを設定します

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>
javascripthtmldominnerhtml
28
Web_Designer

InnerHTMLを使用したくない場合は、document.write(newDocument);を使用できます。

ドキュメントが完全にロードされていない場合は、document.open()も追加する必要があります（bažmegakapaに感謝します）。

26
wchargin

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をサポートしていません。

27
Mathias Bynens

このコードを使用します（現在のドキュメントが読み込まれた後）：

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

この助けを願っています;）

11
fred727

シンプル：

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

Htmlコードに埋め込まれたjsコードを解釈しないことに注意してください。

3
Matthieu Charbonnier