innerHTML とtextContentの違い

2327 ワード
JavaScript JavaScript テキストリンク

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ボタンをクリック

・textContentボタンをクリック

結論

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

アルゴリズム2-remove_を削除copy()
[python]白準1966プリンタキュー(Deque)