insertAdjacentHTML の使い方
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);
28views
