mozilla
Your Search Results

    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: Taken, fscholz, ethertank, Hfjapancom, Shoot, khalid32, Mgjbot
    最終更新者: khalid32,