Zenn
🙂

【JS】 innerHTMLとtextContentの違い

2024/05/15に公開
JavaScript
tech

js勉強中にinnerHTMLとtextContentの違いや使い分けがよく分からなくなり調べてみた

innerHTMLとは

要素に含まれるすべてのテキストを扱う（htmlタグも含む!!）

textContentとは

選択した要素、またその全ての子要素のテキストを扱う

違いを表示してみる

containerクラスのDOMを取得して、それぞれどのような値が取れるのかを確認！

<body>
  <div class="container">
    <div class="text1">テストです</div>
    <div class="text2">テストです2</div>
  </div>
</body>

document.addEventListener('DOMContentLoaded',function() {
  const text = document.querySelector('.container');
  console.log(`text.innerHTML=${text.innerHTML}`);
  console.log(`text.textContent=${text.textContent}`);
})

// consoleの出力
text.innerHTML=
    <div class="text1">テストです</div>
    <div class="text2">テストです2</div>
  
text.textContent=
    テストです
    テストです2

innerHTML使用時の注意点

セキュリティ上のリスクがあるので使い方に注意する必要がある
具体的には、クロスサイトスクリプティング対策が必要！！

安全に使用するために心がけること

①ユーザーからの入力をそのままinnerHTMLに渡す前に、適切にエスケープ処理を行い、HTMLとして解釈されないようにする！
②信頼できるデータのみを使用する！

まとめ

テキストだけ渡したい時はtextContent,htmlも操作したい時はinnerHTMLを使う。
ただしセキュリティにはよく注意して使う！！

Discussion