#プログラミング勉強日記
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>
実行結果
