Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。

構文

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>
<div id="textContenttxt"><div>

<script> 
for (i=0;i<7;i++){ 
    x="txt"+i; 
    document.getElementById(x).firstChild.nodeValue='&<>'
}

document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
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.innerHTML = "";  // 本体の内容を空の文字列に置き換える。

多くの要素型— <body> や <html> を含む— の innerHTML プロパティは値を返したり置き換えたり出来ます。これは動的に更新されたページのソースを見るのにも使えます：

// 一行のままアドレスバーにコピー&ペーストしてみてください。
javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";

このプロパティは、最初はウェブブラウザに実装され、後に WHATWG や W3C によって HTML5 の仕様化されました。古い実装では、各実装が同じように実装されているとは限りません。例えば、テキスト入力欄にテキストが入力された場合、IE は input の innerHTML プロパティの value 属性を変更しますが、Gecko ブラウザは変更しません。

セキュリティ上の注意事項

ウェブページにテキストを挿入するのに innerHTML を使うことは珍しくありません。これにはセキュリティ上のリスクがあります。

var name = "John";
// el は HTML DOM element とする
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; // 警告が出ます

この理由により、plain text を挿入するときには innerHTML を使用せず、代わりに node.textContent を使用することをおすすめします。こちらは渡された contentを HTML として解釈せずに、raw text として挿入します。

仕様

Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.innerHTML' in that specification.		 Living Standard  

関連情報

  • innerDOM - 標準を遵守したい人のために、XML のシリアライズやパーズを提供する JavaScript の関数セットがあります。要素の内容を DOM 経由で文字列として定義したり、文字列として DOM から取得したりできます。
  • insertAdjacentHTML - 新しい HTML で置き換えるのではなく、新しい HTML を追加する innerHTML の代替手段です。
  • jssaxparser - DOM content handler と一緒に使う場合、こちらの SAX2 パーザは、(名前空間、単一引用符で囲まれた属性、CDATA セクション等の構文解析をサポートした) innerDOM よりも (動作は重いですが) 堅牢な解決法になるでしょう。(こちらは文字列から DOM を提供しています。DOM から文字列はかなり簡単です。)
  • quirksmode では効率の考察をしています。
  • MSDN: innerHTML Property

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: j5a, fscholz, khalid32, ethertank, Shoot, Taken, Mgjbot, Hfjapancom
 最終更新者: j5a,