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

この記事は1年以上前の記事のため、内容が古い可能性があります。

例えば

<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の実行結果が優先され、中身がすり替わって表示されます。（サンプル参照）

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