We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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
Element.insertAdjacentHTML() の定義
草案  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

関連情報

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

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