DOMの見慣れないメソッドHTMLElement.insertAdjacent〜

Faster DHTML in 12 Steps (MSDN) DHTMLの12の高速化テクのページの以下のようなコードのinsertAdjacentElementメソッド。(←DOM操作の高速化テク乗っているのでお勧めです。)

SPANノードの直後に100個のSPANを追加するコード*1

 var node;
 for (var i=0; i<100; i++)
 {
  node = document.createElement( "SPAN" );
  node.innerText = " Uses insertAdjacentElement() ";
  divUpdate.insertAdjacentElement( "beforeEnd", node );
 }

HTMLElement.insertAdjacent* メソッド

  • insertAdjacentElement(sWhere, oElement) // HTMLElementの追加
  • insertAdjacentHtml(sWhere, sText) // Htmlで追加
  • insertAdjacentText(sWhere, sText) // Textノードの追加

これらは任意の場所(sWhere)にDOMノードを挿入できるメソッドです。sWhereのパラメータは

beforeBegin オブジェクト開始の直前 afterBegin オブジェクト開始の
beforeEnd オブジェクト終了の直前 afterEnd オブジェクト終了の直後
<h1>foo</h1>
beforeBegin
<div id="oObject">
afterBegin
<span>hoge</span>
beforeEnd
</div>
afterEnd

初めてみたのでメモっと。見慣れない理由はIEオンリーだからですがこれも便利メソッドだなと思いました。まぁ他ではHTMLElement.prototypeが利用できるので互換メソッドを実装すればいいことだけですね。

*1:MSDNから引用