insertAdjacentHTML は、HTML 文字列を指定した位置に挿入する便利なメソッドです。innerHTML より柔軟で、既存の要素を壊さずに追加できます。
基本的な使い方
element.insertAdjacentHTML(position, html) で、位置と HTML 文字列を指定します。
const container = document.getElementById('container'); container.insertAdjacentHTML('beforeend', '<p>新しい段落</p>');
4つの挿入位置
position には4つの値が指定できます。
<!-- beforebegin --> <div id="target"> <!-- afterbegin --> 既存のコンテンツ <!-- beforeend --> </div> <!-- afterend -->
| 位置 | 説明 |
|---|---|
| beforebegin | 要素の直前（兄弟として） |
| afterbegin | 要素の最初の子として |
| beforeend | 要素の最後の子として |
| afterend | 要素の直後（兄弟として） |
実際に動かしてみよう
4つのボタンで、それぞれの位置に追加してみます。
HTML
CSS
JavaScript
<button data-pos="beforebegin">beforebegin</button> <button data-pos="afterbegin">afterbegin</button> <button data-pos="beforeend">beforeend</button> <button data-pos="afterend">afterend</button> <hr> <div id="target" style="border:2px solid #333;padding:10px;"> ターゲット要素 </div>
.added { background: #ffeb3b; padding: 4px; margin: 2px; }
let count = 0; document.querySelectorAll('button').forEach(btn => { btn.addEventListener('click', function() { count++; const pos = this.dataset.pos; const html = '<div class="added">' + pos + ' #' + count + '</div>'; document.getElementById('target').insertAdjacentHTML(pos, html); }); });
innerHTML との違い
innerHTML
既存のコンテンツを完全に置き換える。イベントリスナーが消える
insertAdjacentHTML
既存のコンテンツを保持したまま追加。イベントリスナーも残る
セキュリティの注意
ユーザー入力をそのまま挿入すると XSS 攻撃を受ける可能性があります。
// 危険な例 const userInput = '<script>alert("XSS")</script>'; element.insertAdjacentHTML('beforeend', userInput);
ユーザー入力を含める場合は、エスケープ処理をするか、createElement + textContent を使いましょう。
関連メソッド
テキストを挿入する insertAdjacentText、要素を挿入する insertAdjacentElement もあります。
element.insertAdjacentText('beforeend', 'テキスト'); element.insertAdjacentElement('beforeend', newElement);
