Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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 -->
注記: 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>

仕様

仕様 ステータス コメント
DOM Parsing and Serialization
The definition of 'Element.insertAdjacentHTML()' in that specification.
Living Standard  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 8.0 (8.0) ? ? ?

 

関連情報

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

ドキュメントのタグと貢献者

 このページの貢献者: j5a, fscholz, sounisi5011, jsx, ethertank
 最終更新者: j5a,