【JavaScript】 違いは？「textContent」「innerText」「innerHTML」

こんにちは、さち です。

「JavaScript」を使ってテキストを「取得／書き換え」するときに使う、textContent innerText innerHTML のプロパティ。複数あってどれを使えば良いのかややこしい……。

そこで今回は、textContent innerText innerHTML 3つのプロパティの違いを確認していきます。使い分けの参考になれば幸いです。

「取得」での違い

HTML・CSS

<div id="target">
  【テキスト】<br>【←改行】	【←Tab】【<span>隠す</span>】  
</div>

span { display: none; }

「CSS」によって <span> を非表示にしています。

JavaScript

const target = document.getElementById('target');

console.dir({
  innerHTML  : target.innerHTML,
  innerText  : target.innerText,
  textContent: target.textContent
});

結果＆まとめ

innerHTML  : "\n  【テキスト】<br>【←改行】\t【←Tab】【<span>隠す</span>】  \n"
innerText  : "【テキスト】\n【←改行】 【←Tab】【】"
textContent: "\n  【テキスト】【←改行】\t【←Tab】【隠す】  \n"

それぞれのプロパティで「改行」「スペース」「非表示の要素」に対する挙動が異なります。

基本的に、innerHTML は HTML 形式で忠実に取得、textContent はテキスト関連を忠実に取得、innerText は中途半端でややこしい感じです。

少し複雑なので、表にまとめてみました。

「書き換え」での違い

HTML

<div class="target">innerHTML</div>
<div class="target">innerText</div>
<div class="target">textContent</div>

JavaScript

const target = document.getElementsByClassName('target');
const text = '【テキスト】<br>【←br】\n【←n】&micro;【←エンティティ】';

target[0].innerHTML   = text;
target[1].innerText   = text;
target[2].textContent = text;

結果＆まとめ

HTML の描画結果はこのようになります。

それぞれのプロパティで「改行」「エンティティ」に対する挙動が異なります。

基本的に、innerHTML は HTML 形式で忠実に反映、textContent はテキスト関連を忠実に反映、innerText は中途半端でややこしい感じです。

少し複雑なので、表にまとめてみました。