DOM:element.innerHTML

出典: MDC

« Gecko DOM リファレンス

目次 1 概要 2 書式 3 例 4 注記 5 仕様 6 参考

[編集] 概要

innerHTML は、与えられた要素に含まれる全てのマークアップと内容を設定または取得します。

[編集] 書式

var markup = element.innerHTML;
element.innerHTML = markup;

• markup は、例えば "<p>Some text</p>" のような、要素の (子要素を含む) 内容の生の 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>" という文字列が
// コンソールウィンドウにダンプされます。

[編集] 注記

このプロパティは実際には W3C DOM 仕様の一部ではありませんが、要素の内容を完全に置き換える簡単な手段を提供します。例えば、このようにするとドキュメント本体の全ての内容を消去できます。

document.body.innerHTML = "";  // 本体の内容を空の文字列に置き換える。

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

// 一行のままアドレスバーにコピー&ペーストしてみてください。
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

このプロパティには公式な仕様が無いため、各実装には大きな隔たりがあります。例えば、テキスト入力欄 (HTML の input 要素など) にテキストが入力された場合、IE は input の innerHTML プロパティの value 属性を変更しますが、Gecko ブラウザは変更しません。

決してこれでテーブルの部品を書くべきではありません—W3C DOM メソッドを使うべきです — が、テーブル全体またはセルの内容を書くのに使うことは出来ます。

[編集] 仕様

DOM Level 0。どの標準にも属しません。

[編集] 参考

MSDN innerHTML