要素の中身を変える!JavaScriptでinnerHTMLの使い方【初心者向け】

初心者向けにJavaScriptでinnerHTMLの使い方について解説しています。html要素の中身を変更したい時に便利な関数です。実際にプログラムを書いて、動きを確認することができるので、ぜひ書き方を参考にしてみてください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのinnerHTMLの使い方について解説しています。

html要素の中身を変えるメソッドを実際にサンプルプログラムを書きながら説明しているので、参考にしてみてください。

目次

 

大石ゆかり

田島メンター!

JavaScriptでHTMLを書き換えるって、どういうことなんですか・・・?

田島悠介

はじめはピンと来ないかもしれないね。

JavaScriptでの処理の結果を画面に表示するときに、HTMLを書き換える必要があるんだ。

大石ゆかり

なんだか難しそうです・・・

田島悠介

例を見ながら説明していくね!

 

innerHTMLとは

innerHTMLとは、html要素の中身を変更できるJavaScriptの便利な機能です。

html要素の中身を変更するということがどういうことかについて、プログラムを交えて考えていきます。

 

例えば、画面上に「楽しくプログラムを学習できる!」という文字があります。

 

 

「クリックすれば」ボタンをクリックすると、楽しくプログラムを学習できる!のテキスト部分が、リンク付きのテックアカデミーキャンペーン中!に変化します。

このようにhtml要素の中身を変化させることができるのが、innerHTMLです。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

innerHTMLの書き方

innerHTMLの書き方は次のとおりです。

elementには、innerHTMLで指定する要素名(後に出てくる例の id = “~~” の部分です)を記載します。

element.innerHTML;

 

変数に指定要素のhtmlコードを代入

次のように書くことで、変数sample1に対して、指定した要素elementの全子孫HTMLコードを代入します。

var sample1 = element.innerHTML;

 

指定要素に変数の値を代入

次のように書くことで、element要素の内容を削除した後、変数sample2の内容をelement要素に表示する事が可能です。

element.innerHTML = sample2;

 

指定要素を空にする

つまり、””を代入することで、element要素の内容を空にすることも可能です。

element.innerHTML = “”;

 

innerHTMLを使って実際にプログラムを書いてみよう

実際にinnerHTMLを利用して内容を書き換えてみます。

次のプログラムが基本となります。

 

基本プログラム(HTML)

<html>
    <body>
        <div id="txt">
            <div id="txt1"> テキスト1 </div>
            <span id="txt2"> テキスト2 </span>
        </div>
            <p>---------------------</p>
        <div id="innerHTMLtxt"></div>
    </body>
</html>

 

実行結果(基本プログラム)

テキスト1
テキスト2
---------------------

 

別のコンテンツと置き換える

それでは、基本プログラム(HTML)に次のJavaScriptを追記して実行してみます。

JavaScriptでは、innerHTMLtxtに対して、“テックアカデミーキャンペーン中!”を代入しています。

これによって、実行結果(基本プログラム)で表示されていた内容の下側の、<div id=”innerHTMLtxt”></div>に対して、テックアカデミーキャンペーン中!が入ります。

 

追加プログラム1(JavaScript)

<script>
    innerHTMLtxt.innerHTML="テックアカデミーキャンペーン中!";
</script>

 

実行結果1

テキスト1
テキスト2

---------------------

テックアカデミーキャンペーン中!

 

“”を代入する

それでは、基本プログラム(HTML)に次のJavaScriptを追記して実行してみます。

JavaScriptでは、txtに対して、“”を代入しています。

つまり、txt要素の全子孫に対して””という空っぽの値を代入することになります。

結果的に、txt要素は削除された状態で、txt要素から外れたp要素の<p>———————</p>のみが実行結果に反映され、———————が表示されます。

 

追加プログラム2(JavaScript)

<script>
    txt.innerHTML="";
</script>

 

実行結果2

---------------------

 

動作確認をしてみましょう

次のコードで、先程の追加プログラム1と追加プログラム2の両方を実装しています。

そのため、表示結果は追加プログラム1と2の両方が適用された結果となっています。

 

以上、innerHTMLの使い方を実際にプログラムを書いて説明しました。

innerHTMLの注意点

innerHTMLはとても便利ですが、その名の通り、代入した文字はHTMLとして機能します。

学習を進めていくと複雑なプログラムを書くようになりますが、例えば掲示板などを作るような場合に、一般の方が入力した文字をinnerHTMLで表示するようなプログラムを書かないようにしましょう。

innerHTMLの代わりにtextContentといった書き方もありますので、JavaScriptでDOMを操作する方法【初心者向け】の記事も参考にしてみてくださいね。

 

執筆してくれたメンター

山本 理仁

2007年から、Webシステム開発の要件定義・設計・製造・テスト・運用と様々な案件を経験。

2019年からはフリーランスとしてコーディングなどを承っています。

TechAcademyではフロントエンドコースを担当。

 

大石ゆかり

HTMLを書き換える意味が分かりました!

田島悠介

それは良かった。

いろいろな使い方ができるから、しっかり身につけておくといいよ。

大石ゆかり

分かりました!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。

Webサイトの表現の幅を広げたいという方はぜひご覧ください。