innerHTML の使い方と注意点
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 は便利ですが、セキュリティとパフォーマンスに気をつけて使いましょう。
17views
