【JavaScript】innerHTMLとtextContentの使い方をサンプルコード付きで解説|writeは非推奨

悩む男性

JavaScriptでHTMLを操作する方法を知りたいんだけど、

innerHTMLとtextContentの使い方ってどうすればいいの？

innerHTMLとtextContentの違いって何？

JavaScriptを勉強していると、このような疑問が出てきます。
今回は、innerHTMLとtextContentについてサンプルコードを使って、プログラミング初学者でもしっかり理解できるように解説します。
サンプルコードをコピペして、自分の学習環境でも試すことができるので、ぜひ最後まで読んで試してみてください。

document.innerHTMLとは

innerHTMLとは、HTML要素の内部のHTMLコンテンツ全体を取得または設定するために使用されます。
これは、テキスト、画像、ボタン、リンク、および他のすべてのHTML要素を含めることができます。
innerHTMLを使用することで、HTML要素の内容を動的に変更することが可能になるのです。

使用例は以下お通りです。

// HTML要素の取得
const myDiv = document.getElementById("myDiv");

// innerHTMLを使用してHTML要素の内容を変更する
myDiv.innerHTML = "<h1>Hello, World!</h1>";

上記の例では、myDivというIDを持つHTML要素を取得し、innerHTMLを使用してh1タグ内の”Hello, World!”を含む新しいHTMLコンテンツで置き換えています。

document.textContentとは

textContentは、HTML要素のテキストコンテンツ全体を取得または設定するために使用されます。
これは、HTML要素のテキストのみが含まれます。
textContentを使用すると、HTML要素のテキストのみを動的に変更することができます。

使用例は以下お通りです。

// HTML要素の取得
const myDiv = document.getElementById("myDiv");

// textContentを使用してHTML要素のテキストを変更する
myDiv.textContent = "Hello, World!";

上記の例では、myDivというIDを持つHTML要素を取得し、textContentを使用してテキストを”Hello, World!”に置き換えています。

innerHTMLとtextContentの違い

innerHTMLとtextContentは、DOM要素のコンテンツを更新するために使用されるプロパティですが、異なる方法で機能します。

innerHTMLは、DOM要素の子要素を含むHTML文字列を取得、書き換えができます。
特徴は、HTMLタグを含む文字列を直接操作できるところです。
HTML要素の内容を変更する際には、HTMLタグを含めたテキストを設定することができます。

textContentは、DOM要素の子要素を含まない純粋なテキストを取得、書き換えをします。
textContentプロパティを使用すると、HTMLタグを含まないプレーンテキストを操作することができます。

つまり、HTMLタグを含めるか含めないかの違いです。

innerHTMLを使う際の注意点

innerHTMLを使用するとHTMLタグを含めた文字列を直接操作できるため、柔軟性がある反面、XSS攻撃などの脆弱性に注意が必要です。
一方、textContentはテキストのみを操作するため、安全性が高く、テキストのみを操作する場合に適しています。

非推奨「document.write」

余談ですが、現在は非推奨とされているプロパティwriteを紹介します。

writeは、HTMLドキュメントに直接書き込むことができるメソッドですが、現在は非推奨とされています。 理由は、document.writeが、ページの読み込み中に実行されると、ページの完全な読み込みを妨げ、表示される内容が不正確になる可能性があるためです。

具体的には、ページの読み込み中にdocument.writeを使用すると、ページが読み込み途中で停止し、HTMLドキュメントの内容が完全でない状態で書き換えられてしまう可能性があります。
また、document.writeを使用すると、スクリプトが実行される場所に出力されるため、HTMLの任意の場所に動的なコンテンツを追加することが困難になります。

そこで代替えとなるのが、innerHTMLとtextContentです。

まとめ

今回はinnerHTML、textContentの使い方とinnerHTMLを使う上での注意点について解説しました。
また、今では非推奨となったwriteプロパティについても少し触れさせてもらいました。

この記事が、皆様のお役に立てれば幸いです。

これからも一緒にプログラミング学習に励んでいきましょう。