【JavaScript】textContetとinnerTextとinnerHTMLの違い

6886 ワード
HTML 初心者 プログラミング勉強日記 JavaScript HTML テキストリンク

プログラミング勉強日記

2021年2月1日
ネットで調べると対応するブラウザの違いとあったが、現在ではブラウザでの対応の差はなさそうだった。なので、textContet、innerTextとinnerHTMLの違いを簡単にまとめる。

テキストの扱いの違い

　それぞれでテキストの扱いが違う。テキストを全て文字列として扱うのか、テキストにエスケープ文字やHTMLタグがあったときの機能が違う。

textContet：すべてを表示するための単純なテキストとして扱う
innerText：改行などのエスケープ文字があった場合にその機能を果たす
innerHTML：HTMLタグがある場合にタグとして機能する

わかりやすいサンプルプログラム

　

<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>

<body>
  <div>ただの文字列</div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div> <br />
  <div>エスケープ文字を含める</div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div> <br />
  <div>HTMLタグを含める</div>
  <div class="box7"></div>
  <div class="box8"></div>
  <div class="box9"></div>

  <script>
    document.querySelector('.box1').textContent = "Hello World";
    document.querySelector('.box2').innerText = "Hello World";
    document.querySelector('.box3').innerHTML = "Hello World";
    document.querySelector('.box4').textContent = "Hello\nWorld";
    document.querySelector('.box5').innerText = "Hello\nWorld";
    document.querySelector('.box6').innerHTML = "Hello\nWorld";
    document.querySelector('.box7').textContent = "<b>Hello World</b>";
    document.querySelector('.box8').innerText = "<b>Hello World</b>";
    document.querySelector('.box9').innerHTML = "<b>Hello World</b>";
  </script>
</body>
</html>

実行結果

参考文献

【JavaScript】 2020年版innerHTML/innerText/textContentの違い