Question

When I try to build up a sequence of disconnected DOM nodes using .after, it works fine if they are empty:

[14:56:45.186] $('<span></span>').after('<p></p>');
[14:56:45.193] ({0:({}), length:2, prevObject:{0:({}), length:1}, context:(void 0), selector:".after([object Arguments])", 1:({})})

But if I try to add any text in the first node, it fails:

[14:56:41.521] $('<span>test</span>').after('<p></p>');
[14:56:41.525] ({0:({}), length:1})

If I assign that result to a variable and try to inspect it, it appears as if after had never been called at all.

What’s going on here, and how do I work around it?

---

Edit: For those interested, I ended up writing the following wrappers which seem to be making life much easier for me:

function tag(name) {
    return function(contents, options) {
        var o = options || {};
        var is_array = $.type(contents) === "array";
        if (!is_array) {
            o.text = contents;
        }
        result = $('<' + name + ' />', o);
        if (is_array) {
            $.each(contents, function(i, child) { result.append(child); });
        }
        return result;
    }
}
var span = tag('span');
var div = tag('div');

Answer 1

To clarify your bug — when I run your code in my JavaScript console, I get the following:

> $('<span></span>').after('<p></p>');
[<span>​</span>​,<p>​</p>]
> $('<span>test</span>').after('<p></p>');
[<span>​test​</span>​]

According to the jQuery 1.9 upgrade guide:

Prior to 1.9, .after(), .before(), and .replaceWith() would attempt to
add or change nodes in the current jQuery set if the first node in the
set was not connected to a document, and in those cases return a new
jQuery set rather than the original set. This created several
inconsistencies and outright bugs–the method might or might not
return a new result depending on its arguments! As of 1.9, these
methods always return the original unmodified set and attempting to
use .after(), .before(), or .replaceWith() on a node without a parent
has no effect–that is, neither the set or the nodes it contains are
changed.

So: The behavior you’ve observed is a bug which results from using .after() on a node without a parent. As of 1.9, the jQuery dev team has solved this inconsistency by removing it entirely — using .after() this way should always return the initial node without the <p> after it (fiddle).

Workaround:

Push your DOM nodes onto a simple array. Or append them to a parent node, then get all the children: (fiddle)

$chain = $('<div>').append('<span></span>').append('<p>qwer</p>').children();