what is the programmatic parlance for this phenomenon?

Question

Here is javascript code (jquery) for adding a row of images:

var tr = $('<tr>');
var td = '<td><img src="myimg.jpg"/></td>';
tr.append(td).append(td).append(td);
$('#mytable tbody tr:eq(0)').before(tr);
tr.empty(); //I really don't need this line...

Technically tr.empty() shouldn't have worked. It actually does the opposite of what I want. What is the techinical term for this behaviour - You've added tr to the DOM, but any jquery function calls to that object still works, where as you'd normally not expect it to work i.e. make changes to the DOM?

Answer 1

I think you have a case of a shared mutable object. You are modifying the object in one place and are surprised to see the changes visible in another place. It's not technically wrong; it's just what happens when you have multiple references to an object that can be modified.

Answer 2

If there is a particular term for this other than 'object reference', I don't know what it is. I'd suggest that your expectation:

any jquery function calls to that object still works, where as you'd normally not expect it to work i.e. make changes to the DOM?

should be adjusted - for object variables, one should expect that whichever particular reference a change is made through, all references see the updated object.