要素の中身を変える！JavaScriptでinnerHTMLの使い方【初心者向け】
初心者向けにJavaScriptでinnerHTMLの使い方について解説しています。html要素の中身を変更したい時に便利な関数です。実際にプログラムを書いて、動きを確認することができるので、ぜひ書き方を参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのinnerHTMLの使い方について解説しています。
html要素の中身を変えるメソッドを実際にサンプルプログラムを書きながら説明しているので、参考にしてみてください。
目次
田島メンター！
JavaScriptでHTMLを書き換えるって、どういうことなんですか・・・？
はじめはピンと来ないかもしれないね。
JavaScriptでの処理の結果を画面に表示するときに、HTMLを書き換える必要があるんだ。
なんだか難しそうです・・・
例を見ながら説明していくね！
innerHTMLとは
innerHTMLとは、html要素の中身を変更できるJavaScriptの便利な機能です。
html要素の中身を変更するということがどういうことかについて、プログラムを交えて考えていきます。
例えば、画面上に「楽しくプログラムを学習できる！」という文字があります。
「クリックすれば」ボタンをクリックすると、楽しくプログラムを学習できる！のテキスト部分が、リンク付きのテックアカデミーキャンペーン中！に変化します。
このようにhtml要素の中身を変化させることができるのが、innerHTMLです。
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
---------------------
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
動作確認をしてみましょう
次のコードで、先程の追加プログラム1と追加プログラム2の両方を実装しています。
そのため、表示結果は追加プログラム1と2の両方が適用された結果となっています。
以上、innerHTMLの使い方を実際にプログラムを書いて説明しました。
innerHTMLの注意点
innerHTMLはとても便利ですが、その名の通り、代入した文字はHTMLとして機能します。
学習を進めていくと複雑なプログラムを書くようになりますが、例えば掲示板などを作るような場合に、一般の方が入力した文字をinnerHTMLで表示するようなプログラムを書かないようにしましょう。
innerHTMLの代わりにtextContentといった書き方もありますので、JavaScriptでDOMを操作する方法【初心者向け】の記事も参考にしてみてくださいね。
執筆してくれたメンター
| 山本 理仁
2007年から、Webシステム開発の要件定義・設計・製造・テスト・運用と様々な案件を経験。 2019年からはフリーランスとしてコーディングなどを承っています。 TechAcademyではフロントエンドコースを担当。 |
HTMLを書き換える意味が分かりました！
それは良かった。
いろいろな使い方ができるから、しっかり身につけておくといいよ。
分かりました！
また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。
プログラミングの初心者でも受講可能です。
Webサイトの表現の幅を広げたいという方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
