1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

innerHTML とtextContentの違い

Last updated at Posted at 2020-10-24

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

・textContentボタンをクリック
651cb8d0da6ab73e06bcddce9f891aa3.png

##結論
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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?