JavascriptでHTMlを反映させる場合は、次のように書く。
Element.innerHTML = "<p>HTML</p>"
テキストとして表示したい場合は、次の２通りの書き方ができる。
Element.innerText = "<p>HTML</p>"
Element.textContent = "<p>HTML</p>"
innerTextとtextContentって、一体何が違うの？
と思った人は、次のコードを実際に試してみてください。
innerTextとtextContentの違い
<div id="name">あなたのお名前なんて〜の？
あたしの名前は、ホゲ田フガ子です。</div>
<script>
const txt1 = document.getElementById("name").innerText
const txt2 = document.getElementById("name").textContent
console.log(JSON.stringify(txt1))
console.log(JSON.stringify(txt2))
</script>
実行結果
"あなたのお名前なんて〜の？ あたしの名前は、ホゲ田フガ子です。"
"あなたのお名前なんて〜の？\n あたしの名前は、ホゲ田フガ子です。"
間違い探しぐらい分かりにくいですが、違いは改行"\n"が入っているかどうかの違いです。
innerTextは、表示されているエレメントの内容の通りにテキストを取得してきて、
textContentは、エレメントに書かれているテキスト内容をそのまま取得するという特徴があります。
結論
エレメントに対して書き込みを行う時は、innerTextでも、textContentでもどちらでも良くて、
取得する場合は、textContentの方が間違いなさそうです。
あとがき
上記のサンプルコードのdivタグに、style="white-space:pre"という属性を入れると・・・
あら不思議・・・
結果は、innerTextとtextContentは、同じ結果になってしまいます。
この違い分かりますか？
見た目ですよ。
見た目