textContentが出てきた時に「innerHTMLとは何が違うのだろう?」と疑問に思ったため調べたことを記録します。
innerHTML
Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。
textContent
textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。
文章だけではよくわからなかったので実際に以下のコードを実行します。
html
<html>
<body>
<input type="button" value="innerHTML" onclick="reWrite1()">
<input type="button" value="textContent" onclick="reWrite2()">
<p id="p1">ここがかわるよ</p>
<script>
function reWrite1(){
const p1 = document.getElementById('p1')
p1.innerHTML = "<b>変更しました!</b>"
}
function reWrite2(){
const p1 = document.getElementById('p1')
p1.textContent = "<b>変更しました!</b>"
}
</script>
</body>
</html>
##結論
innerHTML
メソッドではタグはHTMLとして解釈されて表示される。
textContent
メソッドではタグは文字として表示される。
参考記事
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
https://itsakura.com/js-textcontent-innerhtml