Question

When using jQuery functions like replaceWith, the function return-value is (as clearly documented), the original jQuery object. However, I commonly want to chain with the replacement jQuery object. How do I do this?

For example:

$("#original").replaceWith("<span id='replacement'></span>").someFn()
# this calls someFn() on #original, NOT as desired on #replacement.

What’s the nicest way to fix this? Clearly I could do $("#replacement").someFn(), but that’s not the point, as (for example) I may not know the id of the replacement element in advance.

NOTE: I’m also interested in feedback about the premise. eg, am I missing the point of jQuery and is there some idiom I’m missing?

Answer 1

You could create a plugin. In its simplest form it could be:

(function($) {
    $.fn.replace = function(target) {
        $(target).replaceWith(this);
        return this;
    };
}(jQuery));

Usage:

$("<span id='replacement'></span>").replace("#original").someFn();