トップ 言語 JavaScript 基礎編 DOM innerHTMLプロパティ htmlのタグのテキスト内容の変更

htmlのタグのテキスト内容の変更―JavaScriptでinnerHTMLを操作した書き換えの例など

JavaScriptでinnerHTMLを操作した書き換えの例など。htmlのタグのテキスト内容の変更の仕方についてまとめています。

innerHTMLプロパティ

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

補足

以下は関連情報です。概要をみて目的の内容と違いそうでしたら以下も参考にしていただければと思います。

JavaScriptでinnerHTMLを操作した書き換えの例

JavaScriptでinnerHTMLプロパティの値を変更する操作で、htmlタグのテキスト内容を書き換える例を見ていきます。

サンプルソース

ボタンをクリックすると、idがaというpタグ(<p id="a">)のテキスト内容を「Hello World!!」に変更するサンプルプログラムです。

<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!!」というテキスト内容を変更しています。

このように、innerHTMLプロパティの値を変更することにより、htmlタグのテキスト内容が書き換えられます。

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

はじめにページを表示した段階では「ここに文字列を出力します。」と表示されます。

JavaScriptでinnerHTMLを操作した書き換えの例―innerHTMLの値変更前

ボタンをクリックすると内部でinnerHTMLの値が変更され、「Hello World!!」とpタグのテキスト内容が書き変わります。

JavaScriptでinnerHTMLを操作した書き換えの例―innerHTMLの値変更後

もっと別の変更の仕方のサンプル

JavaScriptでの変更の仕方に関しての専用サイトを作成しました。 もっと別の変更の仕方のサンプルがあります。

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴 /翻訳英語の学習 /RSEUserGuide翻訳

スポンサーリンク