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が利用できるので互換メソッドを実装すればいいことだけですね。