要素の中身を変更する方法としてtextContent 、innerText 、innerHTMLの3つがあります。
今回はそれぞれの違いと使い分けについてまとめました。

textContent 、innerText 、innerHTMLの違い

■textContent
要素の中身を すべて「文字」として扱う プロパティです。
HTMLタグを書いても、そのまま文字列として表示されます。

■innerText
「画面上で見えているテキスト」を扱うプロパティです。
CSS の影響を受けるため、非表示の要素は取得されません。
また、＼n（改行コード）を HTML の改行として扱ってくれるのが特徴です。

■innerHTML
テキストだけでなく HTMLタグとして解釈して描画 します。
値に <b> や <br> を入れると、それらがタグとして認識されます。
・<b> は太字
・<br> は改行
ただし注意点として、ユーザーが入力した値をそのまま innerHTML に入れると悪意あるスクリプト（XSS）が実行される可能性があります。
安全性に十分配慮が必要です。

表にまとめると以下になります。

プロパティ役割HTML解釈CSSの影響非表示要素 （画面には表示されない）パフォーマンスこんな時に使う
textContent要素のテキストをそのまま操作❌ 無視❌ 無関係含む◎ 速い・純粋なテキストを扱いたい ・HTMLタグを解釈させたくない ・高速にテキストを更新したい
innerText見た目上のテキストを取得❌ 無視✅ レイアウト反映含まない△ 遅い（再レンダリング※発生）・画面に見えているテキストを取得したい ・コピー＆ペースト時のような「見た目通りの文章」が必要
innerHTMLHTMLごと操作◎ HTMLとして解析❌含む△ 遅い＋安全性注意・HTML構造を動的に作りたい

※レンダリングとは？
ブラウザが HTML/CSS/JavaScript を読み取り、画面に表示する処理のこと。
innerText は「画面に見えているテキスト」を計算するため、このレンダリング工程が再度発生し、処理が重くなることがあります。

サンプルコードと実行結果

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″>
  <title>textContent / innerText / innerHTML サンプル</title>
  <style>
    .box {
      border: 1px solid #aaa;
      padding: 10px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<h2>textContent</h2>
<div id=”box1″ class=”box”></div>

<h2>innerText</h2>
<div id=”box2″ class=”box”></div>

<h2>innerHTML</h2>
<div id=”box3″ class=”box”></div>

<script>
  const text = “くれびです！”;
  // ——————

  // ① textContent
  // ——————
  // タグを書いても「文字として」そのまま表示される
  document.getElementById(“box1”).textContent = “<strong>” + text + “</strong>”;
  // ——————

  // ② innerText
  // ——————
  // textContent と似ているが、CSS 非表示などの影響を受ける
  document.getElementById(“box2”).innerText = “<strong>” + text + “</strong>”;
  // ——————

  // ③ innerHTML
  // ——————
  // HTML として解析され、タグが反映される
  document.getElementById(“box3”).innerHTML = “<strong>” + text + “</strong>”;
</script>
</body>
</html>

実行結果の違い

プロパティ表示される結果
textContent<strong>くれびです！</strong>（タグがそのまま表示される）
innerText<strong>くれびです！</strong>（タグは文字として扱われる）
innerHTMLくれびです！（太字）（strong が反映される）

まとめ

・textContent：一番使いやすく高速。テキストだけ扱うならこれ。
・innerText：画面に表示されるテキストが必要なときに便利。
・innerHTML：HTML構造を動的に作るときに便利だが、安全性と速度に注意。

迷ったときは、基本は textContent。どうしても必要なときだけ innerText / innerHTML を使う。
違いを押さえて、使いこなしましょう。