はじめに

今回はinnerHTMLプロパティとtextContentプロパティの違いについて紹介します。
両方ともJavaScriptの要素内のテキストにアクセスできるプロパティです！
私はよくどっちがどっちだかわからなくなるので、ここでまとめておきます！

両者の違い

● innerHTML

"HTMLを解釈して出力する"のがinnerHTMLです。

● textContent

"HTMLを解釈せずにそのまま文字として出力する"のがtextContentです。

以下にコードの例を載せておきます！

test.html

<p id="p1">ボタンを押して下さい</p>
<input type="button" value="textContent" onclick="clickBtn1()">
<input type="button" value="innerhtml" onclick="clickBtn2()">

<script>
function clickBtn1(){
    const p1 = document.getElementById("p1");

    p1.textContent = "<b>ボタンを押しました</b>";
}
function clickBtn2(){
    const p1 = document.getElementById("p1");

    p1.innerHTML = "<b>ボタンを押しました</b>";
}
</script>

上記のコードは、ボタンをクリックすると、innerHTMLとtextContentでそれぞれ文字が出力される記述です。
innerHTMLの方をクリックした場合は　
ボタンを押しました　
と、<b></b>タグが反映されて太文字で文字が出力されます！

textContentの方をクリックした場合は、HTMLタグが読み込まれないので
<b>ボタンを押しました</b>と、タグもそのまま出力されます！

※こちらのコードは以下のサイトから引用させて頂きました！
こちらのサイトでは、それぞれのボタンをクリックした時のデモもあります！是非ご覧ください！
https://itsakura.com/js-textcontent-innerhtml

さいごに

innerHTMLとtextContentの違いでした！
そもそもどっちがどっちかわからない場合は、innerHTMLの文字の意味を考えると覚えやすいです。
文字そのままでinnerは"内なる"という意味なので、
innerHTMLは直訳すると"HTMLを内に入れる"的な感じになります。
つまりinnerHTMLは"HTMLタグを読み込むよ"って解釈できます！
わからなくなったらこれでいきましょう！

【JavaScript】innerHTM、textContentの違い

はじめに

両者の違い

● innerHTML

● textContent

さいごに