Question

I would like use .appendTo() on different elements determined by a function. For example, I want to be able to do:

$myElement.appendTo(function () {
     if(Math.random() < 0.5) return $el1; else return $el2;
});

However, the jQuery documentation doesn’t cover the case of a function given as an argument to .appendTo().

Is there a specific reason why the jQuery team would not allow for such a feature, and is there a smart way around it (maybe by redefining the .appendTo() function)? Many other jQuery functions allow functions as argument…

Answer 1

There are many ways to make your code work :

• passing a self-calling function as parameter (which would actually mean that you’re passing the function’s return value)
• pass a conditional statement that returns the desired object
• filter the elements before the appendTo call
• etc

but if you truly want to make the jquery appendTo method to take a function as a parameter, you should extend the appendTo method yourself :

(function($){
    var originalAppendTo = $.fn.appendTo;
    $.fn.appendTo = function(f){
        el = typeof f === 'function'
            ?  f.call(this)
            :  f;
        return originalAppendTo.call(this,el);
    }
})(jQuery);

then you can pass a function as parameter to appendTo :

$myElement.appendTo(function () {
    if(Math.random() < 0.5) return $el1; else return $el2;
});

Here’s a working example :

http://jsfiddle.net/gion_13/ZEnMQ/