Help us understand the problem. What is going on with this article?

textContent, innerText, innerHTML の違い (2019年確認版)

はじめに

JSからHTMLを書き換える際に、

  • DOM.textContent
  • DOM.innerText
  • DOM.innerHTML

などを使って書き換えますが、この3つの違いって何だろう...??? てなったので実際にコンソールで試して違いを確認しました。この記事はそのメモです。

なぜ調べたのか

今どきググればすぐ出てくるはず!!

とか思っていたのですが、どうも書いてあることが記事によってバラバラで困りました・・・。
一番多い違いの理由として 対応ブラウザ※ が挙げられていたのですが、どうやらそれは2019年では古い情報な気がします。はっきりする他の理由がググっても出てこなかったので自分で調べちゃえ!!ってノリですw

※ IEだと textContent が使えない / firefoxだと innerText が使えない
などと書かれた記事があったのですが、今回の結果 は違っていました。

検証

環境

以下の環境で違いを比較しました。

  • Chrome最新版 (Mac)
  • Firefox最新版 (Mac)
  • Internet Explorer (Windows10)

方法

以下の文字列を挿入して違いを比較しました。

  • '黄色い雲はkintone'
  • '黄色い雲は\nkintone'
  • '<s>黄色い雲はkintone</s>'

対象

kintoneのカスタマイズビューで簡単なHTMLを作りました。
(こういうときにサクッとHTMLが作れるカスタマイズビューは最高です!)

(CSSで見た目も整えてるけど気にしないでくださいw)

結果

先に結果を書いちゃいます。

結論から言うと、ブラウザによる動作の違いはなかった です。
しかし、textContent / innerText / innerHTML の動きによる違いはある でした。

Chrome で比較

'黄色い雲はkintone'

→ 見た目的には 全部同じ でした。

'黄色い雲は\nkintone'

innerText だけ改行がちゃんと表示されました。
(他の2つもElement上では改行はされているのですが、画面上では空白が入っただけ)

→ innerText だけ <br/> が入ってる!

'<s>黄色い雲はkintone</s>'

innerHTML だけ取り消し線が入りました。(HTMLタグとして動いた)

Firefox で比較

'黄色い雲はkintone'

→ chromeと同じ結果

'黄色い雲は\nkintone'

→ chromeと同じ結果

'<s>黄色い雲はkintone</s>'

→ chromeと同じ結果

Internet Explorer で比較

'黄色い雲はkintone'

→ chromeと同じ結果

'黄色い雲は\nkintone'

→ chromeと同じ結果

'<s>黄色い雲はkintone</s>'

→ chromeと同じ結果

余談①

改行コードのやつはバッククオートによるテンプレートリテラルでも結果は一緒でした。(Chromeのみ検証)

余談②

テキスト挿入ではなくテキスト取得でも同じ結果でした。

スクリーンショット 2019-11-02 17.06.27.png

さいごに

いろいろと調べないとわからないものですね〜。innerText のやつは知らなかったなぁ

それでは!≧(+・` ཀ・´)≦

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away