ダリの雑記:WEBプログラム版

Javascriptでタグに囲まれた内容を取得する(innerHTML)

例えば

<div id="hoge">ほげ</div>

とあり、id="hoge"のdivタグで囲まれている部分の内容を取得する場合は、innerHTMLを使用します。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.write("実行結果:"+data);
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>

このようにスクリプトを記述し、「関数実行」を押せば「実行結果:ほげ」が表示されます。(このソースだと地味なんでわかりにくいですが^^;)

なおinnerHTMLはデータを取得するだけでなく、指定したidを持つタグに出力することもできます。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.getElementById("output").innerHTML = data;
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>
<div id="output"></div>

というようなソースにすれば、id="hoge"のデータを取得後、id="output"に取得したデータを表示させることができます。
ちなみにこのinnerHTMLによる出力、id="output"のタグにあらかじめ内容が記述されていたとしても、javascriptの実行結果が優先され、中身がすり替わって表示されます。(サンプル参照)

サンプル [新しいウィンドウで開く]

モバイルバージョンを終了