5

I am trying to understand the change in behavior of .appendTo() api in jquery 1.9.1 version from previous versions. In the upgrade guide it says

As of 1.9, these methods(.appendTo, .insertBefore, .insertAfter, and .replaceAll) always return a new set, making them consistently usable with chaining and the .end() method. Prior to 1.9, they would return the old set only if there was a single target element. Note that these methods have always returned the aggregate set of all elements appended to the target elements.

I tried with a simple usage of this api 

<div class="test">hello
</div>

var $ = jQuery.noConflict();
var a =$("<p> hi </p>").appendTo("div.test").attr("style","background-color:red");
console.log(a);

Here is the fiddle link

I am appending a paragraph element to a div and then changing the background of the resulting element. I tried this with both 1.7.2 and 1.9.1 in both the cases the result after appending is the paragraph element.

But it has been explained in document that prior to 1.9 it will return old set(in my example old set refers to the div element I believe). I am definitely having a wrong idea about this.

Please help in correcting my understanding.

hjpotter92
  • 78,589
  • 36
  • 144
  • 183
Annapoorni D
  • 831
  • 2
  • 13
  • 30
  • 1
    In 1.9.1 it returns: [p, prevObject: jQuery.fn.jQuery.init[1], context: undefined, jquery: "1.9.1", constructor: function, init: function…] In 1.7.2: [p, constructor: function, init: function, selector: "", jquery: "1.7.2", size: function…] Compare those and investigate them more closely. You should note that they are indeed a bit different from each other. Also it states that they are more consistent, meaning they were not entirely consistent beforehand. – Lemonade Jul 25 '13 at 11:24
  • 1
    Try to use `end()`: `$("

    hi

    ").appendTo("div.test").end().attr("style","background-color:red")`.     – meze Jul 25 '13 at 11:26
  • no problem, use `var a =$("div.test").append("

    hi

    ");`     – vladkras Jul 25 '13 at 11:31
  • @meze Thanks for the reply I am getting a better understanding now. – Annapoorni D Jul 26 '13 at 03:21

2 Answers2

1

"these methods have always returned the aggregate set of all elements appended" means it returns the jQuery collection on which appendTo() was called -- not the set passed into the function.

This would be the paragraph, in your case. So it should return that regardless of the jQuery version you are using as long as "div.test" is a single-element target (and, by the way, don't you mean $('div.test')?), or if using v 1.9, as long as "div.test" returns at least one element.

This is the case for jQuery chaining with most calls -- that the funciton returns the element it was called on so you may continue doing other things with it. I beleive this is the case with all of the manipulation subset of jQuery functions.

Faust
  • 15,130
  • 9
  • 54
  • 111
0

They returned the elements attached to a single target element. Even if the target element was not found.

The new version returns the entire set, regardless of the number of target elements. If the target element was not found they will return nothing anymore.

Thus meaning, they return the created structure instead of the appended data.

Lemonade
  • 503
  • 2
  • 8