jQuery の Manipulation(DOM 操作)で優先的に使うべきメソッドのまとめ

December 25, 2008

jQuery 1.2.6 のソースコードを見ると、appendTo, prependTo, insertBefore, insertAfter, replaceAll の定義は下記のように、内部で append, prepend, before, after, replaceWith を呼び出し元、引数の対象を逆にして呼び出すようになっていることがわかる。

jQuery.each({
appendTo: “append”,
prependTo: “prepend”,
insertBefore: “before”,
insertAfter: “after”,
replaceAll: “replaceWith”
}, function(name, original){
jQuery.fn[ name ] = function() {
var args = arguments;
return this.each(function(){
for ( var i = 0, length = args.length; i < length; i++ )
jQuery( args[ i ] )[ original ]( this );
});
};
});

あくまでも append, prepend, before, after, replaceWith がオリジナルのメソッドなのだ。
処理のステップを少なくするには、appendTo, prependTo, insertBefore, insertAfter, replaceAll はメソッドチェーン的に書きやすいか、引数となる対象が jQuery オブジェクトではない場合に限った方がよいだろう。
A.appendTo(B) とも B.append(A) とも変数 A, B がどちらも jQuery オブジェクトであるなら、後者を選んだ方がよい。
DOM 操作をするときは(replaceWith は除くが)append, prepend, before, after とメソッド名が短い方を選ぶと覚えておこう。

tilfin freelance software engineer