1

With jQuery 1.11.3, I found elements are disordered in IE<9, when I append() a bundle of elements including text node. Is this jQuery bug, or mine?

Test Code:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery test</title>
        <script src="http://code.jquery.com/jquery-1.11.3.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="div"></div>
        <script>
            $('#div').append(
                $('<span/>', {
                    css: {
                        color: 'red'
                    },
                    text: 'Some'
                }).add(
                    $(document.createTextNode(' Texts '))
                ).add(
                    $('<span/>', {
                        css: {
                            fontSize: 'x-large'
                        },
                        text: 'are'
                    })
                ).add(
                    $(document.createTextNode(' appended.'))
                )
            );
        </script>
    </body>
</html>

In IE 11 (and all other modern browsers):

IE11

In IE 8 emulation mode:

IE8

4
  • Rather than $(..).append($(..).add(..).add(..).add(...)), control the insertion order more directly with this; $(...).append(...).append(...).append(...). The first one relies on the DOM order inside the jQuery object after .add(). It would be better to directly control the .append() order yourself.
    – jfriend00
    Commented May 25, 2015 at 2:32
  • @jfriend00: yes it "resolves" the situation, but I'm concerning whether this is jQuery bug and must be reported, since append()ing a bundle of elements together, especially when I play with vars, is more useful than append()ing elements each by each.
    – hakatashi
    Commented May 25, 2015 at 2:41
  • 1
    You can append mulitple elements just by using a comma separated list, there's no need for add, like this -> jsfiddle.net/adeneo/yryr026w
    – adeneo
    Commented May 25, 2015 at 2:52
  • @adeneo: ugh thanks for advice. That helped my personal problem but still remains my chance for reporting bug for jQuery foundation... :)
    – hakatashi
    Commented May 25, 2015 at 3:09

1 Answer 1

2

I don't think this is a bug, but rather a documented jQuery behavior. Directly from the doc for .add():

Do not assume that this method appends the elements to the existing collection in the order they are passed to the .add() method. When all elements are members of the same document, the resulting collection from .add() will be sorted in document order; that is, in order of each element's appearance in the document. If the collection consists of elements from different documents or ones not in any document, the sort order is undefined.

So, jQuery specifically documents that the order for your newly created DOM elements that are not in the DOM is undefined.

As I mentioned in my comment, you could control the .append() order yourself to avoid this issue by using this type of construct instead of .add():

$(...).append(...).append(...).append(...)

The jQuery doc itself recommends:

$(array_of_DOM_elements) 

So, you could collect the DOM elements into an array (rather than into a jQuery object) which would also be more efficient than multiple calls to .add() (each of which creates a new jQuery object) and then add that array to a jQuery object in one call.

You could also create your own document fragment, append the elements into the fragment, then insert the fragment.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.