【JavaScript】innerHTMLで要素の内容を書き換える!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年05月18日に投稿されました。)

JavaScriptで指要素を書き換える方法としてinnerHTMLがあります。

innerHTMLとは指定した要素の子要素の書き換えや取得を行うプロパティとなります。

そのため、画面上の要素を変更したり、要素の値を取得したい場合に使用することができます。

また、HTMLタグとして認識するため、値だけでなくHTML要素として書き換えることもできます。

しかし、innerHTMLはリスクもありますので注意して使用するようにしましょう。

今回はJavaScriptのinnerHTMLで要素の値を書き換える方法について紹介していきます。

この記事はこんな方におすすめ
・指定した要素の子要素を書き換えたい場合
・指定した要素の子要素を取得したい場合

innerHTML()とは

innerHTML()と指定した要素の子ノードを操作するプロパティになります。

そのため、指定した子ノードを書き換えたり、取得したりすることができます。

innerHTMLの書き方

innerHTMLの書き方は下記のようになります。

セレクタの後ろにinnerHTMLと入力し、変更する値をイコールでつなげることで、要素の書き換えが可能になります。

また、下記のように記載することもできます。

セレクタの後ろにinnerHTMLと入力し、変更名とイコールでつなげることで、指定したセレクタの値を取得することができます。

innerHTMLの対象範囲

innerHTMLの対象範囲は指定したHTML要素の子要素の開始タグから終了タグとなります。

innerHTMLで要素の内容を書き換えるサンプルコード

innerHTMLで要素の内容を書き換えるサンプルコードをご紹介します。

ここでは、下記の3つのパターンでinnerHTMLを使用します。

  1. 要素の値を書き換える場合
  2. 要素のHTMLタグごと書き換える場合
  3. 要素の値を削除する場合

要素の値を書き換える場合

innerHTMLで要素の値を書き換えるには変更したい値を文字列で指定します。

● index.html

● main.js

実行結果

innerHTMLで要素の値を書き換えた結果

innerHTMLによって要素の値を書き換えています。

そのため、「この要素を書き換える」から「別の要素に書き換えました。」に変更されて表示されています。

また処理後のソースを確認すると、値が変更されていることがわかります。

処理後のソース

innerHTMLで要素の値を書き換えた後のソースコード

要素の別の要素に書き換える場合

innerHTMLで要素の別の要素に書き換えるにはHTMLタグが入った値を文字列で指定します。

innerHTMLはHTMLタグを認識するため、HTML要素を文字列で指定することで別の要素に書き換えが可能になります。

● index.html

● main.js

実行結果

innerHTMLで要素の別の要素に書き換えた結果

innerHTMLによって要素の別の要素に書き換えています。

今回は「redBold」クラスを付与した「spanタグ」から書き換えたため、「別の要素に書き換えました。」が赤色の太字で表示されています。

また処理後のソースを確認すると、要素の中ににpanタグの要素が追加されていることがわかります。

処理後のソース

innerHTMLで要素の別の要素に書き換えた後のソースコード

要素を削除する場合

innerHTMLで要素を削除するには、innerHTMLに「“”(空文字)」を指定します。

指定した要素の子要素を空文字に書き換えるため、要素の削除が可能になります。

● index.html

● main.js

実行結果

innerHTMLで要素を削除した結果

innerHTMLによって指定した要素を削除しています。

そのため、「この要素を書き換える」という要素が表示されていません。

また、処理後のソースを確認すると、コードが削除されていることがわかります。

処理後のソース

innerHTMLで要素を削除した後のソースコード

innerHTMLで要素の値を取得する場合

innerHTMLは要素の値を書き換えるだけでなく、要素の値を取得することもできます。

● index.html

● main.js

実行結果

innerHTML()で要素の値を取得した結果

そのため、「<p class =”pArea”>この要素を書き換える</p>」が表示されています。

innerHTMLとinnerTextの違い

JavaScriptにはinnerHTMLとよく似た、innerTextが存在します。

innerTextとは指定した要素の値を書き換えたり、取得したりするプロパティであり、innerHTMLと類似したプロパティとなります。

しかし、この2つの違いは「書き換える時にHTMLタグを認識するかしないか」が大きな違いとなります。

例えば下記のコードを見て下さい。

● index.html

● main.js

実行結果

innerHTMLとinnerTextで要素を内容を書き換えた結果

innerHTMLはPタグの「innerHTMLで要素を変更します。」に書き換えていますが、innerTextは「<p>innerTextで要素を変更します。</p>」に書き換えています。

そのため、タグを認識して書き換えるか書き換えないというのがinnerHTMLとinnerTextの大きな違いです。

つまり、要素の内部のHTMLを変更する場合はinnerHTMLを使用し、要素の内部のテキストを変更する場合はinnerTextを使用するようにしましょう。

innerHTMLを使用する際の注意点

指定した要素の値を書き換えることができるinnerHTMLですが、注意しておかなければならないことがあります

そのため、ここではinnerHTMLを使用する際の注意点ついてご紹介します。

意図しない挙動を引き起こす可能性がある

innerHTMLは、文字列をそのままHTMLとして解釈してしまうため、不正なHTMLタグやスクリプトが含まれている場合、意図しない挙動を引き起こす可能性があります。

例えば下記のように、innerHTMLでframeの要素を追加したとします。

● index.html

● main.js

実行結果

innerHTMLでframeの要素を追加した結果

innerHTMLによって「iframeタグ」が埋め込まれ、onload属性内にあるloadEvent関数が発生し、アラートが表示されています。

つまり、文字列として追加したはずの値がHTML要素と認識され、設定していた関数が実行されてしまったということです

このような発生を防ぐためにinnerHTMLに挿入する文字列は、HTMLエンティティやサニタイズ処理などを行って、HTMLタグやスクリプトを無効化する必要があります。

Sossy

このようにWebサイトの脆弱性を悪用して罠を仕掛け、悪意のあるスクリプトが仕込まれることがあります。
これをクロスサイトスクリプティング(XSS)といいます。

使いすぎるとパフォーマンスが低下する可能性がある

innerHTMLは、DOMを書き換えるため、使いすぎるとパフォーマンスが低下する可能性があります。

例えば、for文を使用してinnerHTMLとinnerTextをそれぞれ1000回繰り返し、かかった時間を計測します。

● index.html

● main.js

実行結果

innerHTMLとinnerTextをそれぞれ1000回繰り返した結果

実行結果(ログ)

innerHTMLとinnerTextをそれぞれ1000回繰り返した結果のログ

結果からして何も変わらないように感じるかと思います。

しかし、ログを見てみると、「2ミリ秒」かかっているinnerTextに比べて、innerHTMLは「13ミリ秒」かかっており、innerHTMLの方が負荷が大きいことがわかります。

そのため、数少ない要素を書き換えるのには問題はありませんが、数が多い場合はinnerHTMLの使用を控えるようにしましょう。

innerHTMLを使用した実際のケース

innerHTMLを使用した実際のケースについてご紹介します。

ここでは、innerHTMLを使用して追加、修正機能が付いたTodoリストを作成します。

● index.html

● main.js

実行結果

innerHTMLを使用して追加、修正機能が付いたTodoリストを作成した結果

innerHTML()によってTodoリストが作成されています。

今回は修正ボタンを押した際にinnerHTMLによって、入力した値を反映するようにしています。

自分自身と中身のHTML要素を書き換える場合

自分自身と中身のHTML要素を書き換える場合は、outerHTMLを使用します。

outerHTMLは、指定したHTML要素ごと書き換えたり、取得したりするプロパティになります。

そのため、今回紹介しているinnerHTMLの範囲が広がったプロパティとなります。

● index.html

● main.js

実行結果

outerHTMLで自分自身と中身のHTML要素を書き換えた結果

outerHTMLによって指定したタグの要素が作成されています。

そのため、「この要素を書き換えました。」という文字列が表示されています。

また、処理後のソースコードを見ると、指定した要素自身から書き換わっていることがわかります。

処理後のソース

outerHTMLで自分自身と中身のHTML要素を書き換えた後のソースコード

まとめ

⚫︎ innerHTMLとは指定した要素の子要素を書き換えたり、取得したりするプロパティである

⚫︎ innerHTMLで要素の値を書き換えるには値を文字列で指定する

⚫︎ innerHTMLで要素を別の要素に書き換えるにはHTMLタグごと文字列で指定する

⚫︎ innerHTMLで要素の値を削除するには空文字を指定する

⚫︎ 変数に対してinnerHTMLを使用すると、要素の値を取得できる

⚫︎ innerHTMLとinnerTextとの違いは「書き換える時にHTMLタグを認識するかしないか」である
(innerTextだとすべて文字列として書き換えるが、innerHTMLはHTMLタグはタグと認識して書き換える)

⚫︎ innerHTMLは下記の点に注意して使用する
・予想していない処理が行われる可能性がある
・使いすぎるとパフォーマンスが低下する可能性がある

⚫︎ 自分自身と中身のHTML要素を書き換える場合はouterHTMLを使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA