element.insertAdjacentHTML

概要

insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置(第一引数で指定)に挿入します。

これは挿入先の要素を再度パースするものでなく、即ち既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避出来る分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。

構文

挿入対象要素.insertAdjacentHTML( 位置, HTML文字列 );

位置 には 挿入対象要素 に対する相対位置を、以下に示す 4 つの定義済の 位置キーワード の内の何れかで指定します。

beforebegin
挿入対象要素 の直前に挿入
afterbegin
挿入対象要素 内部の、最初の子要素の前に挿入
beforeend
挿入対象要素 内部の、最後の子要素の後に挿入
afterend
挿入対象要素 の直後に挿入

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

ポジション名の可視化

<div>
<p>foo</p>
</div>

※上記コード内の p 要素を対象とした場合の、各ポジション名に於ける挿入位置を以下に示します。

<div>
<!-- beforebegin -->
<p><!-- afterbegin -->foo<!-- beforeend --></p>
<!-- afterend -->
</div>
注意: beforebegin 及び afterend の位置指定で動作するのは、ノードがツリー内にあり、且つ親要素が存在する場合のみとなります。

var d1 = document.getElementById( 'one' ); // <div id="one">one</div> を取得し変数に代入

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

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

ブラウザ実装状況

機能 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) ? ? ?

仕様

関連情報

Document Tags and Contributors

Contributors to this page: ethertank
最終更新者: ethertank,