innerText・innerHTML・textContent

 innerText・innerHTML・textContent

この3つについての違いがわからなかったので簡単にまとめてみました。

・innerText

選択した要素、またその全ての子要素のページ上で見えているものを表示します。

※非表示の要素は返しません。

ある文章のpタグの値を取得してみます。

空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素、 <style> タグのように元々ブラウザに表示されない要素のテキストは取得しません。また <br> タグで改行が行わている場合は改行された状態でテキストを取得します。

・textContent

選択した要素、またその全ての子要素のテキストを扱います。隠れている要素も表示されます。

\n や空白が空白が確認とれます。これはHTMLの改行やスペース部分になります。

つまりHTMLに書かれているもの全てが表示されているので若干、 innerTextと異なることがわかります。

・innerHTML

（HTMLタグを含む）要素に含まれるすべてのテキストを扱います。

戻り値は要素に含まれる HTML 文が文字列で戻されます。

HTML 文は HTML ファイルに記述されている内容をそのまま取得します。

HTML要素含めて更新をしたい場合はinnerHTMLを使うしか方法はありません。