Rotate your phone

YOSHISUGA My Portfolio

Blog

javascript innerText innerHTML textContentの違い

elementオブジェクト(HTMLを内包したオブジェクト)のプロパティinnerTextとinnerHTMLとtextContentの違いをよく忘れてしまうので、備忘録として調べたことを書いていきます。

一部の記事では違いとして対応ブラウザが挙げられていましたが、現在では対応の差はほとんどないようです。では何が違うかというとテキストの扱われ方です。

下にサンプルを用意しました。

See the Pen vYyxXXp by yoshiyuki suganuma (@yoshisuga) on CodePen.

まとめ

プロパティHTMLとして解釈改行
innerHTMLされる。内部的には保持されるが、ブラウザに反映されない。
innerTextされない。タグは文字列として登録される。改行コードはbrタグとして解釈される。
textContentされない。タグは文字列として登録される内部的には保持されるが、ブラウザに反映されない。
Blog一覧へ戻る