innerHTML





innerHTMLとは、ある要素に含まれるHTMLを示すプロパティです。HTMLのタグをJavaScriptで使うためのオブジェクトとして取得するgetElementByIdメソッドとともに、

document.getElementById('id_name').innerHTML

という形でよく使われます。

ではさっそく、ある要素に含まれるHTMLをinnerHTMLで取得してみましょう。

<html>

<head>

<script type="text/javascript">
<!--

window.onload=function() {
var message=document.getElementById("message").innerHTML;
alert(message);
}

// -->
</script>

</head>

<body>

<p id="message"><b>Hello</b></p>

</body>

</html>


idが message のp要素には、太字で「Hello」と記述しています。

20110527_1

この部分のHTMLをinnerHTMLで取得し、messageという変数に格納してから出力しています。

20110527_2

BタグのついたHTMLがダイアログに出力されました。



コンテンツの動的入れ替え


innerHTMLを使うと、コンテンツを動的に入れ替えることができます。変な例ですが、作ってみました。



人面犬を見たことがありますか?

こないだ発見しました。

下のボタンをクリックしてみてください。





divタグの中にあるテキストや画像など、innerHTMLでいっしょくたに示すことができるのが便利です。

ソースを書きます。

<html>

<head>

<script type="text/javascript">
<!--

function changecontents(){

document.getElementById("contents").innerHTML="<img src='http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/20110411_3.jpg' height='100'><br />こんなんです。"
}

// -->
</script>

</head>

<body>

<div id="contents style="background-color:#ffffcc">
人面犬を見たことがありますか?

こないだ発見しました。

下のボタンをクリックしてみてください。

</div>

<form>
<input type="button" value="クリック" onclick=changecontents()>
</form>

</body>

</html>


関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/18-5ca59ec5
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック