読者です 読者をやめる 読者になる 読者になる

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

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 とメソッド名が短い方を選ぶと覚えておこう。