element.insertAdjacentHTML

概要

insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

構文

element.insertAdjacentHTML(position, text);

position には element に対する相対位置を、以下に示す文字列の 1 つで指定します。

'beforebegin'

element の直前に挿入

'afterbegin'

element 内部の、最初の子要素の前に挿入

'beforeend'

element 内部の、最後の子要素の後に挿入

'afterend'

element の直後に挿入

text には HTML または XML としてパースし DOM ツリーに挿入することが可能な文字列を指定します。

ポジション名の可視化

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

メモ: beforebegin および afterend の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなります。

例

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 挿入位置および挿入後の構造は、以下のようになります。
// <div id="one">one</div><div id="two">two</div>

仕様

Specification
DOM Parsing and Serialization
# dom-element-insertadjacenthtml

ブラウザ実装状況

BCD tables only load in the browser

関連情報