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.