insertAdjacentHTML()は、HTMLノードを DOM ツリー内の指定された位置に挿入する。
insertAdjacentText()は、テキストノードを、DOM ツリー内の指定された位置に挿入する。
insertAdjacentElementは、既存要素をDOM ツリー内の指定された位置に挿入する。
このinsertAdjacentHTML、insertAdjacentTextやinsertAdjacentElementを使えば挿入先の要素内に在る、既存の要素や要素内部の破壊を伴わない。既存要素を代入するテキストに加わえるステップを回避できる分、innerHTMLやinnerText、textContent、appendChildの代入操作より簡潔になる。

構文

element.insertAdjacentHTML(position, text1);

element.insertAdjacentText(position, text2);

element.insertAdjacentElement(position, newelement);

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

‘beforebegin’

element の直前に挿入

‘afterbegin’

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

‘beforeend’

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

‘afterend’

element の直後に挿入

text1にはDOMツリーに挿入するHTMLコードを含む文字列を指定する。
text2にはDOMツリーに挿入する文字列を指定する。
newelementにはDOMツリーに挿入する要素を指定する。
注記: beforebegin および afterend の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなる。