【初心者必見】innerHTMLとinnerTextの違いとは？―JavaScriptでよく使うけれど混乱しやすい2つをやさしく解説！
山崎講師
こんにちは。ゆうせいです。
JavaScriptでHTML要素の中身を取得・書き換えようとするとき、あなたはどちらを使っていますか？
element.innerHTML
element.innerText
「なんとなく innerHTML の方がよく見る気がする…」「innerText って何が違うの？」と迷っていませんか？
今回は、似ているようで全然違うこの2つのプロパティの違いを、新人エンジニア向けにやさしく解説していきます！
そもそも何をするもの？
まず、共通点から確認しましょう。
innerHTMLとinnerTextは、HTML要素の「中身（コンテンツ）」を取得・書き換えするプロパティです。
でも、「何を中身とみなすか」が大きく違うんです！
結論から言うと…
| プロパティ | 取得・操作の対象 | HTMLタグも含む？ | 用途 |
|---|---|---|---|
innerHTML | HTML構造ごと | 含む | 要素の構造ごと操作したいとき |
innerText | 表示されているテキストだけ | 含まない | 画面に表示されている文字を取得したいとき |
例で見てみよう！
HTML
<div id="sample">
<strong>こんにちは</strong> <em>世界</em>
</div>
JavaScriptで取得
const el = document.getElementById('sample');
console.log(el.innerHTML);
// → "<strong>こんにちは</strong> <em>世界</em>"
console.log(el.innerText);
// → "こんにちは 世界"
innerHTMLは タグを含めたHTMLコードそのもの を返しますinnerTextは 表示される文字列だけ を返します
それぞれの用途と使いどころ
innerHTML が得意なこと
✅ HTML構造を一括で挿入・変更したいとき
el.innerHTML = '<p>新しい段落</p>';
✅ 要素をループで作るときにも便利！
list.innerHTML += `<li>${item}</li>`;
※ ただし、XSS（クロスサイトスクリプティング） のリスクがあるため、外部から取得したデータには注意！
innerText が得意なこと
✅ 表示されている文字だけを取得したいとき
console.log(button.innerText); // ボタンに表示されている文字
✅ ユーザーが見ている内容を基準にした処理をしたいとき
たとえば、「ログイン」ボタンの文字が「ログアウト」になっていたら…？
if (button.innerText === 'ログアウト') {
// ログアウト処理を実行
}
よくある間違い
Q1. 「innerTextでHTMLタグが返ってこないのはバグ？」
→ いいえ、それが仕様です。
innerText は実際に表示される「人間向けのテキスト」だけを返します。タグは無視されます。
Q2. 「タグ付きで文字を追加したのに反映されない！」
el.innerText = "<b>重要</b>";
// → 表示：<b>重要</b>
→ innerText では タグはただの文字列として扱われる ため、HTMLとして解釈されません。
比較まとめ（表）
| 特徴 | innerHTML | innerText |
|---|---|---|
| タグも扱う | ○（含まれる） | ×（除去される） |
| 書き換え可能 | ○ | ○ |
| セキュリティ注意 | 高（XSSの危険あり） | 低 |
| 表示用に向いている？ | △ | ◎ |
| 構造操作向き？ | ◎ | × |
実践のヒント：どちらを使うべき？
- 見た目（文字）だけを扱いたい →
innerText - HTMLタグ込みで差し替えたい →
innerHTML
迷ったらこう覚えましょう！
「innerTextは人間向け、innerHTMLはブラウザ向け」
今後の学習の道しるべ
次に進むなら、以下のキーワードを学ぶと理解がさらに深まります！
- textContent：innerTextとの違い（非表示の文字も取得できる）
- XSS（クロスサイトスクリプティング）対策
- DOM操作の基礎（createElement、appendChildなど）
- templateタグとinnerHTMLの組み合わせ
innerHTML と innerText の違いがしっかり分かると、UIの操作やデータの取り扱いがグッと正確になります！
ぜひ、違いを意識しながら実際に手を動かしてみてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール