概要
DOM 要素の文字・HTML の操作には
textContent/innerText/innerHTMLの3種類があり、用途や挙動が異なります。違いを理解することで、UI 表示の安全性・パフォーマンス・意図しない HTML レンダリングの防止につながります。
本記事では、
- 3つのプロパティの役割と違い
- セキュリティ・パフォーマンス比較
- 実務での使い分け方
という観点で整理して解説します。
目次
文字操作プロパティ一覧
| プロパティ名 | HTMLタグの扱い | 表示の対象 | 改行扱い | 特徴 |
|---|---|---|---|---|
textContent |
無視し、文字として扱う | 非表示文字も含む |
\nをそのまま表示 |
最速・安全 |
innerText |
文字として扱う | 見える部分だけ | 改行としてレンダリング | レイアウト依存 |
innerHTML |
HTML として解析・描画 | 見える部分だけ | HTML に従う | HTML を挿入できる |
特徴・使い分け比較
| 観点 | textContent |
innerText |
innerHTML |
|---|---|---|---|
| HTMLタグ扱い | タグを文字として扱う | タグを文字として扱う | タグをHTMLとして解釈 |
| 改行の扱い |
\nそのまま文字 |
改行として描画 |
<br> に従う |
| 非表示内容（CSS hide等） | 含む | 含まない（表示部分のみ） | 含まない |
| セキュリティ | 安全 | 安全 | 危険（XSSリスク） |
| 表示速度 | 最速 | やや遅い（レイアウト計算あり） | 遅い（パース必要） |
| 主な用途 | 生テキストの表示、ログ、入力値 | 適切な見た目で表示 | UI生成、HTML込みで挿入 |
活用例
1. ユーザー入力や動的テキスト → textContent が安全
const userText = "<b>悪意あるスクリプト</b>";
element.textContent = userText; // 文字として表示（安全）
2. 画面表示と同じ「改行」を扱いたい → innerText
element.innerText = "A\nB\nC";
// A
// B
// C という見た目に
3. HTMLを挿入したい（テンプレ生成など）→ innerHTML
element.innerHTML = `<strong>Hello</strong> <em>World</em>`;
外部データを挿入する場合は絶対に使わないこと（XSS脆弱性）
まとめ
| プロパティ | 使うべき用途 | 注意点 |
|---|---|---|
textContent |
入力値や単純表示、パフォーマンス重視 | HTML は表示される |
innerText |
改行を自然に表示したい場合 | 非表示文字は扱わない |
innerHTML |
HTML を挿入した UI 生成 | XSS の危険性がある |