insertAdjacentHTMLとinsertAdjacentText

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

構文

element.insertAdjacentHTML(position, text1);

element.insertAdjacentText(position, text2);

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

‘beforebegin’
element の直前に挿入
‘afterbegin’
element 内部の、最初の子要素の前に挿入
‘beforeend’
element 内部の、最後の子要素の後に挿入
‘afterend’
element の直後に挿入

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