element.innerHTML

概要

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

書式

varmarkup = 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

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

Contributors to this page: fscholz, khalid32, ethertank, Shoot, Taken, Mgjbot, Hfjapancom
最終更新者: khalid32,
サイドバーを隠す