【JavaScript】innerHTM、textContentの違い

#はじめに
今回は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タグを読み込むよ"**って解釈できます！
わからなくなったらこれでいきましょう！