element.insertAdjacentHTML

概要

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

構文

element.insertAdjacentHTML(posision, text);

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

'beforebegin'

element の直前に挿入

'afterbegin'

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

'beforeend'

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

'afterend'

element の直後に挿入

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

ポジション名の可視化

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- 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>

仕様

ブラウザ実装状況

関連情報

• Henri Sivonen 氏による hacks.mozilla.org へのゲストポスト には、幾つかのケースでは insertAdjacentHTML  がより速い方法であることを示すベンチマークが含まれています。