テキスト・HTMLの書き換え

textContent innerHTML innerText

要素のテキスト内容やHTMLを動的に変更するプロパティです。セキュリティと用途に応じて使い分けが重要です。

デモ：textContent vs innerHTML

表示結果：

こんにちは、<strong>世界</strong>！

textContent：HTMLタグをそのまま文字列として表示

比較：textContent vs innerHTML vs innerText

プロパティ	HTMLタグ	CSS考慮	速度	XSSリスク	用途
textContent	エスケープ（文字列）	❌ 無視	✅ 最速	✅ なし	テキスト書き換え（推奨）
innerHTML	解釈・レンダリング	✅ 反映	△ 遅い	⚠️ あり	HTML動的生成（注意が必要）
innerText	エスケープ（文字列）	✅ 反映	△ 遅い	✅ なし	表示テキストの取得

コード例

const el = document.querySelector('#target');

// textContent：テキストの読み書き（HTMLタグは文字列として扱う）
el.textContent = 'こんにちは！';
console.log(el.textContent); // タグを除いたテキストのみ取得

// innerHTML：HTMLの読み書き（⚠️ ユーザー入力には使わない）
el.innerHTML = '<strong>太字テキスト</strong>';

// innerText：スタイル適用後の表示テキストを取得
// display:none の要素は含まない
console.log(el.innerText);

// ✅ ユーザー入力を安全に挿入するには textContent を使う
const userInput = '<script>alert("XSS")</script>';
el.textContent = userInput; // 安全（文字列として表示）
// el.innerHTML = userInput; // ❌ 危険（スクリプトが実行される）

// outerHTML：要素自身を含むHTMLを取得・置換
console.log(el.outerHTML);  // <div id="target">...</div>
el.outerHTML = '<p>置き換え後</p>'; // 要素ごと置き換え

⚠️ XSS（クロスサイトスクリプティング）に注意

innerHTML にユーザー入力をそのまま入れると、悪意あるスクリプトが実行される危険があります。

// ❌ 危険
el.innerHTML = userInput;

// ✅ 安全：DOMPurify ライブラリでサニタイズ
import DOMPurify from 'dompurify';
el.innerHTML = DOMPurify.sanitize(userInput);

// ✅ 最も安全：テキストのみなら textContent を使う
el.textContent = userInput;

NEWsetHTMLUnsafe / getHTML（Chrome 124+）

Declarative Shadow DOM に対応した新しいHTML読み書きAPIです。innerHTML の後継として提案されています。

// getHTML: Shadow DOMを含むHTMLを取得
const html = el.getHTML({ serializableShadowRoots: true });

// setHTMLUnsafe: Shadow DOMを含むHTMLを設定
// （名前の通り、信頼できる文字列のみ使用すること）
el.setHTMLUnsafe('<div><template shadowrootmode="open">...</template></div>');

// ✅ 安全版：setHTML（まだ実験的）
// el.setHTML(html); // サニタイズ処理を内包

🤖 AIプロンプトテンプレート

以下のようなinnerHTML / textContent / insertAdjacentHTMLを使ったDOM書き換えのサンプルコードを生成してください：
- textContentを使って安全にテキストを書き換える基本実装
- innerHTMLでHTMLを動的に生成する方法とXSSリスクの注意点
- DOMPurifyを使ったinnerHTMLのサニタイズ処理
- insertAdjacentHTML('beforeend', ...)を使った要素の追加パターン
- outerHTMLを使った要素ごとの置き換えと新しいsetHTMLUnsafe APIの紹介

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee