Question

After I clone my (div) container and change the id, I cannot seem to get at it using the id-selector, am I doing something wrong? I know the clone is correct, I know the id changed good, but I can no longer use the default Jquery selector to get at that element.

var clone = $('#test').clone(); 
clone.attr('id', 'abc');

alert(clone.attr('id')); // gives 'abc'
alert($("#abc").html()); // gives null   <------------ WHY?
alert(clone.html());     // gives correct html

Answer 1

You haven’t inserted the clone into the DOM yet. This $("#abc") looks in the current document for that ID and it isn’t in there yet.

This works:

var clone = $('#test').clone(); 
clone.attr('id', 'abc');

alert(clone.attr('id'));            // gives 'abc'
$(document.body).append(clone);     // <==== Put the clone into the document
alert($("#abc").html());            // gives correct html