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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

innerHTMLとは

innerHTMLとは、html要素の中身を変更することができるJavaScriptの便利な関数です。

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

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

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

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

 

innerHTMLの書き方

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

elementには、innerHTMLで指定する要素名を記載します。

element.innerHTML;

 

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

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

var sample1 = element.innerHTML;

 

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

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

element.innerHTML = sample2;

 

指定要素を空にする

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

element.innerHTML = “”;

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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の両方が適用された結果となっています。

次のJavaScript部分を書き換えると、また異なる結果を表示することもできます。

 

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

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

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。