innerHTML は、要素の中身を HTML 文字列として取得・設定するプロパティです。手軽に HTML を操作できますが、セキュリティには注意が必要です。
基本的な使い方
<div id="container"> <p>こんにちは</p> </div>
const container = document.getElementById('container'); // 取得（HTML タグも含む） console.log(container.innerHTML); // "<p>こんにちは</p>" // 設定（HTML として解釈される） container.innerHTML = '<strong>太字</strong>のテキスト';
要素を追加する
既存の内容に追加するには += を使います。
container.innerHTML += '<p>追加された段落</p>';
ただし、+= を使うと既存のイベントリスナーが消えてしまうので注意が必要です。
innerHTML の特徴
HTML として解釈される
文字列に含まれるタグが実際の要素として作成される
既存の内容を置き換える
設定すると、既存の子要素はすべて削除される
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="target">最初のコンテンツ</div> <button id="replaceBtn">置き換え</button> <button id="addBtn">追加</button>
#target { padding: 15px; background: #f5f5f5; border: 1px solid #ddd; min-height: 50px; }
const target = document.getElementById('target'); document.getElementById('replaceBtn').addEventListener('click', () => { target.innerHTML = '<strong>置き換えられた</strong>コンテンツ'; }); document.getElementById('addBtn').addEventListener('click', () => { target.innerHTML += '<br><em>追加されたテキスト</em>'; });
セキュリティの注意（XSS）
ユーザー入力を innerHTML に直接入れると、スクリプトが実行される危険があります。
// 危険な例 const userInput = '<img src="x" onerror="alert(\'XSS\')">'; container.innerHTML = userInput; // XSS 攻撃が成功する
ユーザー入力を表示するときは textContent を使いましょう。
// 安全な例 container.textContent = userInput; // タグがエスケープされる
innerHTML と textContent の使い分け
innerHTML
HTML を埋め込みたいとき。ユーザー入力は危険
textContent
テキストだけを設定するとき。安全
パフォーマンス
大量の要素を追加するとき、ループ内で innerHTML += を繰り返すのは遅いです。
// 遅い for (let i = 0; i < 1000; i++) { container.innerHTML += '<p>項目</p>'; } // 速い（文字列を組み立ててから一度だけ設定） let html = ''; for (let i = 0; i < 1000; i++) { html += '<p>項目</p>'; } container.innerHTML = html;
innerHTML は便利ですが、セキュリティとパフォーマンスに気をつけて使いましょう。
