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

# 更新情報

> ▼ 2020/05/18
> 内容を再度検証して更新しました。
> 新たに Safari と Edge を追加しました。

# はじめに

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

- DOM.textContent
- DOM.innerText
- DOM.innerHTML

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

# なぜ調べたのか

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

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

※ IEだと `textContent` が使えない / Firefoxだと `innerText` が使えない、などと書かれた記事もあったのですが、[**今回の結果**](#結果) とは違っていました。

# 結果

とりあえず結果から！！（詳しい検証方法は下に記載しています）

結論から言うと、
`ブラウザが違うことによる(見た目的な)動作の違いはなかった`
です。ChromeだろうとFirefoxだろうと同じ動きをしました。

しかし、
`textContent / innerText / innerHTML の動きによる違いはある` 
でした。

1. ノーマルテキスト
2. 改行ありテキスト(`\n`) 
3. 取り消し線HTMLありテキスト(`

`) 

の3パターンで検証した結果、

- <font color="red">textContent</font>
    - 特に何もなし（一番普通）
- <font color="red">innerText</font>
    - `\n`で実際に改行されるのはこれだけ
- <font color="red">innerHTML</font>
    - `

`が動くのはこれだけ

でした。詳細が気になる方は下で。

# 検証

検証方法をざっくり記載します。

## 環境

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

- Chrome: 81.0.4044.138 ※Mac
- Firefox: 76.0.1 (64 ビット) ※Mac
- Safari: 13.1 (15609.1.20.111.8) ※Mac
- Microsoft Edge: 81.0.416.72 ※Win10
- Internet Explorer: 11.0.14393.0 ※Win10

## 方法

以下の文字列をテキスト挿入メソッド3つに対して行いました（3×3の9パターン）

①`'黄色い雲はkintone'`
②`'黄色い雲は\nkintone'`
③`'
黄色い雲はkintone
'`

実行したJavaScriptはこちら

```javascript

document.getElementById('id1').textContent = '黄色い雲はkintone';
document.getElementById('id2').innerText = '黄色い雲はkintone';
document.getElementById('id3').innerHTML = '黄色い雲はkintone';

document.getElementById('id4').textContent = '黄色い雲は\nkintone';
document.getElementById('id5').innerText = '黄色い雲は\nkintone';
document.getElementById('id6').innerHTML = '黄色い雲は\nkintone';

document.getElementById('id7').textContent = '
黄色い雲はkintone
';
document.getElementById('id8').innerText = '
黄色い雲はkintone
';
document.getElementById('id9').innerHTML = '
黄色い雲はkintone
';
```

## 対象

kintoneのカスタマイズビューで簡単なHTMLを作りました。
（複数ブラウザ/複数PCでも簡単に検証できて、kintoneはやはり便利でしたね〜）
<img src="https://docs.google.com/drawings/d/e/2PACX-1vSrHOIyXlYZhY2VRUcUrHGksrUR08Kzev7khGsrPI0jvJJoZn_xgk63KrXAbbpO7AEnIXHvDpp2PXeh/pub?w=1500">
HTMLはこんな感じです。

```html
<body>
  <div>
    <p class="test-h1">'黄色い雲はkintone'</p>
    <h2 class="test-h2" id="id1">textContent</h2>
    <h2 class="test-h2" id="id2">innerText</h2>
    <h2 class="test-h2" id="id3">innerHTML</h2>
  </div>
  <div>
    <p class="test-h1">'黄色い雲は\nkintone'</p>
    <h2 class="test-h2" id="id4">textContent</h2>
    <h2 class="test-h2" id="id5">innerText</h2>
    <h2 class="test-h2" id="id6">innerHTML</h2>
  </div>
  <div>
    <p class="test-h1">'&lt;s&gt;黄色い雲はkintone&lt;s&gt;'</p>
    <h2 class="test-h2" id="id7">textContent</h2>
    <h2 class="test-h2" id="id8">innerText</h2>
    <h2 class="test-h2" id="id9">innerHTML</h2>
  </div>
</body>
```

# 各ブラウザでの比較

## Chrome

<img src="https://docs.google.com/drawings/d/e/2PACX-1vQO78iRVQfz7uliWzogx9hfFO-ZR1m2Kz-s0EgoM9mMdYkbHzVK9pUQXnI2Xh80fxik35wsW6Vjl3m4/pub?w=1500">
<font color="gray">①'黄色い雲はkintone'</font>
見た目的には **全部同じ** でした。

<font color="gray">②'黄色い雲は\nkintone'</font>
**innerText** だけ改行がちゃんと表示されました。(innerTextの場合だけbrタグが入っていました)
※ 開発者ツール上では全部改行されていますが、brタグがないとHTML画面上では改行されてませんでした。面白い。

<font color="gray">③'&lt;s&gt;黄色い雲はkintone&lt;s&gt;'</font>
**innerHTML** だけ取り消し線が入りました。（HTMLタグとして動いた）

## Firefox

<img src="https://docs.google.com/drawings/d/e/2PACX-1vSanGk8UqSn1FOHiVrrT1_X6Agyo6zTl5bn42c3gXPMz5VyORMEvJXerkXZ_cvqNBiex4TtgHDNkf2k/pub?w=1500">
ほとんどchromeと同じ結果でしたが、
② Chromeでは textContent の場合も開発者ツール上では **改行** されてましたが、Firefoxの開発者ツール上では改行はされず空白が入ってるだけでした。ちょっと違っていて面白い。

## Safari

<img src="https://docs.google.com/drawings/d/e/2PACX-1vRQWDpICMd3F2Zlrgp8KDtuRt26m1tKUZaAWm-Wc8pBW-E_KP0kqki5WIJSmB8G1b0u29wyONkwzYE-/pub?w=1500">
Firefoxと一緒でした。

## Microsoft Edge

<img src="https://docs.google.com/drawings/d/e/2PACX-1vQw9eUZ3qkuiNeAmqF8QRSpbiM40VrWYxeGg-PFHmRTPctqFtas1KE8BUyIzEg83Yfqj3nyufB0OAYC/pub?w=1500">
Chromeと一緒でした。（さすがChromium）

## Internet Explorer

<img src="https://docs.google.com/drawings/d/e/2PACX-1vSfV_SWalfP8QWcfDRbFuFICbouri7vzYhO6LhRkdz9I2-nfqFVavWrfvnfDA_mpJfoGF-aLjrB9z1Y/pub?w=1500">
Firefoxと一緒でした。（画面切れててすみません・・）

# さいごに

いろいろと自分で調べないとわからないものだな〜と勉強になりました。
特に `innerText` × `\n` の改行の違いは知らなかったですね。

それでは！≧(+･` ཀ･´)≦