innerHTML

インナーエイチティーエムエル（DOM操作）

意味 HTML内容の変更

innerHTMLとは？

innerHTMLプロパティは、指定された要素のHTML内容を取得または設定するためのプロパティです。

innerHTMLの具体的な使い方

innerHTMLを使用して要素の内容を更新する例

<button onclick='updateInnerHTML()'>innerHTMLの使用例</button>
<div id='content'>元のコンテンツ</div>

<script>
function updateInnerHTML() {
  let element = document.getElementById('content');
  console.log('更新前のinnerHTML:', element.innerHTML);
  element.innerHTML = '<p>新しいコンテンツ</p>';
  console.log('更新後のinnerHTML:', element.innerHTML);
  alert('要素の内部HTMLを更新しました');
}
</script>

idが'content'の要素内のHTMLを'<p>新しいコンテンツ</p>'で更新し、更新前後のinnerHTMLをコンソールに出力します。最後に更新されたことをアラートで通知します。

innerHTMLを使用して要素の内容を取得し追加する例

let element = document.getElementById('content');
console.log('現在の内容:', element.innerHTML);
element.innerHTML += '<p>追加のコンテンツ</p>';
console.log('更新後の内容:', element.innerHTML);

👇出力結果

現在の内容: <p>新しいコンテンツ</p>
更新後の内容: <p>新しいコンテンツ</p><p>追加のコンテンツ</p>

既存のHTML内容を取得し、新しい内容を追加します。コンソールに現在の内容と更新後の内容を出力します。

innerHTMLに関するよくある質問

Q. innerHTMLの使用は安全ですか？

A. innerHTMLは便利ですが、ユーザー入力を直接使用すると、クロスサイトスクリプティング（XSS）攻撃の危険があります。ユーザー入力を使用する場合は、必ず適切にエスケープまたはサニタイズしてください。

Q. innerHTMLとtextContentの違いは？

A. innerHTMLはHTML文字列として解釈され、要素内のHTMLを変更します。一方、textContentは純粋なテキストとして扱われ、HTMLタグはエスケープされます。セキュリティ上、可能な場合はtextContentの使用が推奨されます。

Q. innerHTMLで要素のイベントは保持されますか？

A. いいえ、innerHTMLを使用して要素の内容を変更すると、既存の要素に関連付けられていたイベントリスナーは失われます。新しく追加された要素にイベントを設定する場合は、再度イベントリスナーを追加する必要があります。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのinnerHTMLについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのinnerHTMLやsetAttribute()、HTMLCollection、getAttribute()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。