指定したテキストをHTMLまたはXMLとして解析し、指定した位置のDOMツリーへその結果のノードを挿入します。 既に使用されている要素の再解析は行わないため、要素内に存在する要素が破損されることはありません。 このように余計なシリアライズ化の手順を避ける事で、 直接innerHTMLを行うよりも、 はるかに速くすることが可能です。

文法

element.insertAdjacentHTML(position, text);

引数	説明
position	要素への相対位置を指定します。 値は下記のいずれかの文字列にしなければいけません。 'beforebegin' 要素自身の前 'afterbegin' 要素内の、最初の子要素の前 'beforeend' 要素内の、最後の子要素の後ろ 'afterend' 要素自身の後ろ
text	HTMLまたはXMLとして解析し、ツリー内へ挿入する文字列を指定します。

位置名の視覚化

<!-- 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>

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	8.0 (8.0)	4.0	7.0	4.0 (527)

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	?	8.0 (8.0)	?	?	?

仕様

関連項目

• hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

 Back to top