innerHTML
- 2011-04-11 Mon 22:19:01
- イベントハンドラ
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」と記述しています。
この部分のHTMLをinnerHTMLで取得し、messageという変数に格納してから出力しています。
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>
- 関連記事
タグ :
Trackback+Pingback:
- TrackBack URL for this entry
- http://javascriptmania.blog111.fc2.com/tb.php/18-5ca59ec5
Comments: