Defective cloned object

[darkthread]

I tried to append several dynamic tables to a DIV container and found something interesting.

<div id="divContainer">
    <table></table></div>
<script type="text/javascript">
$(function() {
    var div = $("#divContainer");
    var table = div.find("table");
    var c = 0;
    for (var i = 0; i < 3; i++)     { 
       table = table.clone();
        div.append(table);
    }
    alert(div.children().length);
    alert(div.html());});
</script>

What will 'div.children().length' be? It should be 4 in this case, but you will get 3 in IE7 and 4 in Firefox 3. The 'alert(div.html())' provide more detail. In IE7, the div.html() looks like this:

<TABLE jQuery1218765772477="227"><TBODY></TBODY></TABLE> 
<TABLE jQuery1218765772477="228"><TBODY jQuery1218765772477="null"></TBODY></TABLE> 
<TABLE jQuery1218765772477="null"><TBODY jQuery1218765772477="null"></TBODY></TABLE> 
<TABLE jQuery1218765772477="null"> <TBODY jQuery1218765772477="null"></TBODY></TABLE> 

And div.html() will return blow result in Firefox3:

<table></table><table></table><table></table><table></table> 

It seemed that jQuery added additional identification information (jQuery1218765772477 attribute) in IE and some of them are 'null'. After more experiments, I found if I modified the code to:

table2 = table.clone();
div.append(table2); 

I got div.children().length==4 and

<TABLE jQuery1218765990513="231"><TBODY></TBODY></TABLE> 
<TABLE jQuery1218765990513="232"><TBODY jQuery1218765990513="null"></TBODY></TABLE> 
<TABLE jQuery1218765990513="233"><TBODY jQuery1218765990513="null"></TBODY></TABLE> 
<TABLE jQuery1218765990513="234"><TBODY jQuery1218765990513="null"></TBODY></TABLE>

Every table got a unique jQuery1218765990513 attribute, so the jQuery.unique() didn't filter out the extra 'null' attribute table object . I don't think "table = table.clone()" is illegal syntax and this should be a bug of jQuery.clone().

[nathanhammond]

Test Case

[nathanhammon]

This bug didn't turn out to be where I expected it. Somewhere in the children() function we're losing track of the element?

Regardless of how many are attached, IE will always return 3.

[dmethvin]

The problem starts here in the clone() method:

return jQuery.clean([container.innerHTML])[0];

IE will auto-insert TBODY tags into tables, and they'll be present in the innerHTML string. Since the incoming HTML string has the TBODY tags, jQuery.clean thinks the caller intended them to be there and doesn't attempt to strip them out. At that point the node count differs between the original and cloned nodes, which will cause further bizarre symptoms if clone() copies events to the clone.

See #3500 for a similar case.

[john]

Fixed in SVN rev [6186].