JavaScriptでのタグのテキスト内容の変更(innerHTMLプロパティ)

このページでは、JavaScriptでのタグのテキスト内容の変更(innerHTMLプロパティ)について説明しています。

説明

innerHTMLプロパティは、DOMでよく使われるプロパティで指定したタグのテキスト内容を参照したり、設定したりすることができます。

サンプルプログラム

ボタンをクリックすると、idがaというpタグ(<p id="a">)のテキスト内容を「Hello World!!」に設定するサンプルプログラムを記述しています。 (表示結果→sample.html)。


<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<p id="a">ここに文字列を出力します。</p>

<input type="button" value="ボタン"
onclick="document.getElementById('a').innerHTML='Hello World!!';">

</body>
</html>

ポイント

このサンプルでは、ボタンクリックというイベントを処理するためイベントハンドラを使っています。イベントハンドラを使うときは、以下のmetaタグを記述します。

<meta http-equiv="Content-Script-Type" content="text/javascript">

フォームのボタンがクリックされたときのイベントハンドラを「onclick」といいます。以下のように記述するとイベント処理が実行されます。

onclick="＜イベント処理＞">

document.getElementById()メソッドで、idがaのpタグのエレメントを取り出して、このタグのinnerHTMLプロパティに「Hello World!!」というテキスト内容を設定しています。

戻る

Loarding…