【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptでHTML要素の取得や書き換えができるinnerHTMLプロパティについて

  • innerHTMLプロパティとは
  • innerHTMLプロパティを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

innerHTMLプロパティとは

innerHTMLプロパティとは、HTML要素に対して

  • 取得
  • 値の書き換え
  • HTMLタグの書き換え

ができるプロパティです。

共通していることはinnerHTMLプロパティを使うためには

または

というように触りたいHTML要素を取得する必要があります。
getElementByIdメソッドについては、こちらの記事をご参考ください。

次の章から

  • 取得
  • 値の書き換え
  • HTMLタグの書き換え

それぞれをサンプルプログラムをまじえて解説します。

HTML要素を取得するやり方を解説

HTML要素を取得するやり方を解説を解説します。

要素を取得するには

と書きます。
上記のサンプルの場合、「HTML要素」に

が設定されているとすると、sampleに同じものが設定されます。

次の章で実際に使ってみます。

サンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【押す】ボタンを押します。
ブラウザ表示

指定したidの要素が取得でき、アラートに表示できたことが確認できました。
アラートにinnerHTMLで取得した要素を表示

HTML要素の値の書き換えをするやり方を解説

HTML要素の値の書き換えをするやり方を解説を解説します。

書き換えをするには

と書きます。
上記のサンプルの場合、「書き換える内容」に

が設定されているとすると、指定したHTML要素の値に同じものが設定されます。

次の章で実際に使ってみます。

サンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【F12キー】を押してデベロッパーツールを表示させます。

pタグには「押す前」が設定されていることが確認できました。
【押す】ボタンを押すと、「押した後」に書き換えられたことが確認できました。

HTML要素のHTMLタグの書き換えをするやり方を解説

HTML要素のHTMLタグの書き換えをするやり方を解説を解説します。

書き換えをするには

と書きます。
上記のサンプルの場合、「書き換える内容」に

が設定されているとすると、指定したHTML要素の子に同じものが設定されます。

次の章で実際に使ってみます。

サンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【F12キー】を押してデベロッパーツールを表示させます。

idが「divSample」の中に

があることが確認できました。
【押す】ボタンを押すと、

に書き換えられたことが確認できました。

まとめ:innerHTMLプロパティを使ってみよう

以上がJavaScriptでHTML要素の取得や書き換えができるinnerHTMLプロパティについての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました