テキストの扱いの違い

一般的に違いを説明している記事に多く書かれているのは対応ブラウザの違いです。

しかし、現在ではほとんどのブラウザで対応の差はありません。

それではなにが違うのでしょうか。

実はそれぞれでテキストの扱い方が違うのです。

扱い方の特徴です。

• テキストを全て単純なテキストとして扱うか
• テキストにエスケープ文字があった場合は意図どおり機能するか
• テキストにHTMLタグがあった場合はタグとして機能するか

textContentは全てを表示するための単純なテキストとして扱います。

innerTextはエスケープ文字がその通りに機能します。（例：改行、タブなど）

innerHTMLはHTMLタグがあるとタグとして機能します。

それぞれの動作を見てみましょう。

See the Pen Inner Content Test by CodeAid (@codeaid) on CodePen.

動かして見るとわかりますね。