.innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML

HTML文をその要素の子孫に対し、設定または取得を行います。

注: もし、<div>、<span>、または<noembed>ノードが、特殊な文字(&)、(<)、(>)、を含むテキストノードを子として持つ場合、 innerHTMLは、これらの文字をそれぞれ&amp、&lt、&gtとして返します。 Node.textContentを使用すれば、これらの正確なコピーを取得することが出来ます。

文法
例
注意事項
関連項目
仕様

文法

var content = element.innerHTML;

contentは、elementの全子孫のシリアライズされたHTMLコードを取得します。

element.innerHTML = content;

elementの全ての子を削除し、content文字列を解析し、結果のノードをelementの子として割り当てます。

例

<html>
<head></head>
<body>

<div id="txt">
  <script     id="txt0"> x=0 </script>
  <noembed    id="txt1"> 1   </noembed>
  <noframes   id="txt2"> 2   </noframes>
  <noscript   id="txt3"> 3   </noscript>
  <div        id="txt4"> 4   </div>
  <div>
    <noscript id="txt5"> 5   </noscript>
  </div>
  <span       id="txt6"> 6   </span>
</div>

<div id="innerHTMLtxt"></div>
<p>---------------------</p>
<div id="textContenttxt"><div>

<script>
for (i=0;i<7;i++){
    x="txt"+i;
    document.getElementById(x).firstChild.nodeValue='&<>'
}
//innerHTMLを使用
document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
//textContentを使用
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
</script>

</body>
</html>

// HTMLがこのような場合、
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

d = document.getElementById("d");
dump(d.innerHTML);

// "<p>Content</p><p>Further Elaborated</p>"の文字列が
// コンソールウインドウ上に表示されます。

注意事項

このプロパティは、要素の内容をそっくり入れ替えてしまうシンプルな方法を提供します。例えば、documentのbodyを下記のように削除することが出来ます。

// bodyの内容を空の文字列に置き換えています。
document.body.innerHTML = "";

<body>または<html>を含む多くのタイプの要素のinnerHTMLプロパティは、文字列値を返す、または置換することが可能です。これは、直接修正されたページ内のソースを確認するのにも使用することが出来ます。

//アドレスバーにコピー、ペースト
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

このプロパティは、WHATWGとW3CのHTMl5によって指定されているため、ウェブブラザに最初から実装されています。古い(ブラウザ)実装では、全く同じように実装されていない可能性があります。例えば、inputのtextタイプの入力欄に入力されていた場合、 Internet ExplorerはinnerHTMLプロパティで値が変更されますが、Geckoブラウザではそうなりません。

セキュリティ考察

webページでinnerHTMLを使用してテキストを挿入するのは一般的ではありません。これはセキュリティリスクを伴います。

var name = "John";
// elはHTMLのDOM要素だとする。
el.innerHTML = name; // このケースは、無害

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // このケースは、無害

このケースは一見クロスサイトスクリプト攻撃のように見えますが、結果として害はありません。 HTML5では、innerHTMLを通して挿入した<script>タグは、実行すべきではないとしています。

しかし、<script>要素を使用せずにJavaScriptを実行させる方法が存在するため、あなたが制御できない文字列をinnerHTMLによって設定できてしまうのであれば、それは依然としてセキュリティリスクとなり得ます。例えば、

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name; // alertが表示されます。

このような理由で、innerHTMLはプレーンテキストを挿入するのに使用すべきではありません。代わりに、element.textContentを使用してください。これはHTMLとして渡された内容を解釈しませんが、代わりに生のテキストとして挿入します。

仕様

innerDOM - これは標準に準拠することを望む人のための、 DOMを介して文字列として定義された要素の内容、または文字列としてDOMから取得した要素の内容を設定する、 XMLのシリアライズまたは解析の機能を提供するJavaScript関数セットの1つです。(翻訳に自信なし)
insertAdjacentHTML - innerHTMLの代わりに、置換する代わりに新しいHTMLを追加することを可能にしてくれます。
jssaxparser - innerDOM(名前空間、シングルクォート属性、CDATAセクション、その他の解析をサポート)より更に堅牢な(重いが)解決作として、そのDOMコンテンツのハンドラーを使用する際にこのSAX2パーサーがあります。 (DOMに文字列を提供します。DOMから文字列が非常に簡単になります。(翻訳に自信なし))
ベンチマーク: quirksmode
MSDN: innerHTML Property

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。

.innerHTML

文法

例

注意事項

セキュリティ考察

関連項目

仕様