JavaScriptのinnerHTMLとtextContentの違いについて

JavaScriptの要素内のテキストにアクセスできるプロパティである、innerHTMLプロパティとtextContentプロパティの違いについて紹介します。

2つの主な違いは、「テキストを文字列として扱われるかどうか」というところです。
innerHTMLプロパティは、文字列とHTMLの両方を扱うことができます。
一方の、textContentプロパティ文字列のみで、HTMLはすべて文字列として扱われます。

innerHTMLとtextContentについて
プロパティ名説明
innerHTML内容にHTMLが含まれる場合
textContent内容が文字列のみの場合

テキストにHTMLを含まれないのであれば、textContentプロパティのほうが高速で、セキュリティ面でも安全なので、なるべくtextContentプロパティを利用するようにしましょう。