Terms Privacy

© Rollpie

JavaScript
20 Jan 2026

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

7 views