jQuery object are immutable?

Question

Hello a new noob on jQuery here and I was wondering if jQuery objects are immutable. For example:

var obj1 = $("<tag></tag>");
var obj2 = obj1.append("something");

Will obj1 and obj2 be the same meaning obj2 will reference obj1?

UPDATE:

The above example kind of scratches the surface of what i want to know, a more accurate question is : If i chain function from the jQuery api will they return the same object or a new one (as the case with strings in Java)?

Many jQuery methods (not .append) return a new jQuery object due to their nature, do you need a compherensive list of all of those methods or something? It doesn't matter if you're chaining, what matters is what the methods return. `$("div").append("something").bind( "click", fn )` returns the same object while `$("div").parent()` returns a new object while `$("div").html()` doesn't return a jQuery object at all but string — Esailija, Nov 16 '11 at 09:54
@Esailija I don't need a list, i was just thinking that if you chain and a new object will be returned then that would be a memory leak — Daniel, Nov 16 '11 at 10:09
Yes it would, for example `var a = $("div").parent()` will create 2 objects and while it looks like nothing is referring to the first object and it will be garbage collected, the second object actually refers to the first object in its `.prevObject` property so, in this situation, if you store `a` somewhere you will never get rid of the first object even though you are only using the second one. — Esailija, Nov 16 '11 at 10:20

Mathias Bynens · Answer 1 · 2011-11-16T09:50:42.647

6

Both obj1 and obj2 will be a reference to the jQuery object containing the <tag></tag> element, yes.

If you want to keep a reference to the second element, you could use .appendTo() instead:

var obj1 = $("<p>foo</p>"),
    obj2 = $("<span>bar</span>").appendTo(obj1);

edited Nov 16 '11 at 09:50

answered Nov 16 '11 at 09:33

Mathias Bynens

144,855
52
216
248

score 3 · Answer 2 · answered Nov 16 '11 at 09:33

3

Yes, it obj2 will reference obj1. What it basically does is append whatever given to obj1 and returns the reference.

You may try seeing at console that obj1 and obj2 having the text "something"

console.log(obj1);
console.log(obj2);

answered Nov 16 '11 at 09:33

Abdul Munim

18,869
8
52
61

score 3 · Answer 3 · answered Nov 16 '11 at 09:34

Assuming I've understood your question, yes, obj2 will be a reference to the object stored in obj1. If you do something to obj2:

obj2.attr("id", "example");

You will see the changes in obj1:

console.log(obj1) //Will show <tag id="example">something</tag>

You can confirm this further by testing the two objects for equality:

console.log(obj1 == obj2) //true

score 1 · Answer 4 · answered Nov 16 '11 at 09:32

1

http://jsfiddle.net/rLg9S/

Both object return the same element so yes.

answered Nov 16 '11 at 09:32

Adam Merrifield

10,307
4
41
58

1

This does not answer the question. – Tadeck Nov 16 '11 at 09:34
1

`obj1` isn't modified but the underlying dom element (`obj1["0"]`) is. – Esailija Nov 16 '11 at 10:03

score 1 · Answer 5 · answered Nov 16 '11 at 11:22

If a function changes which elements are in a selection, then yes, there will be a new object created.

For example:

var link = $('#myLink'),
    span = link.find('span');

link is a different object to span. However, the original object is not actually lost. You can go back to it very easily with the end method, which basically rolls back a manipulation operation.

$('#myLink')
    .find('span') // get the span elements
        .css('color', '#fff')  // modify them
    .end() // go back to the original selection
    .css('font-size', '24px'); // modify that

So if you had a very large number of chained selection calls that didn't use end, you could end up with a very large object (because there would be a chain of objects that referenced the object that made them). This would be incredibly awkward design, however, so it's unlikely that you're doing that, while Javascript's garbage collection should generally mean that objects you've finished with don't hang around in memory.

score 0 · Answer 6 · answered Nov 16 '11 at 09:36

0

You can use $.clone() if you need copy of the object.

var obj2 = obj1.clone().append("something");

answered Nov 16 '11 at 09:36

Maxim Krizhanovsky

26,265
5
59
89

score 0 · Answer 7 · answered Nov 16 '11 at 09:43

0

var obj1 = $("<p></p>");
var obj2 = obj1.append("something"); // in this is you just assign the `obj1` object to `obj2`

like:

var x = 5;
var y = x; //here, both x and y are 5

So, obj1 and obj2 will refer the same thing

proof:

console.log(obj1 === obj2);

answered Nov 16 '11 at 09:43

thecodeparadox

86,271
21
138
164

jQuery object are immutable?

7 Answers7