I'm creating a tree control and I'm attempting to use a parent element as a template for its children. To this end I'm using the element.cloneNode(true) method to deep clone the parent element. However when I insert the cloned element into the DOM it is
missing certain inner elements despite having an outerHTML value identical to its parent. Surprisingly I observe the same behavior is in IE, Firefox, and Chrome leading me to believe that it is by design.
This is the HTML for the node I'm attempting to clone.
<SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf>
<IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN>
Once I've cloned the node using cloneNode(true) I examine the outerHTML property and find that it is indeed identical to the original.
<SPAN class=node><A class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf><IMG class=nodeIcon alt="Taylor Swift" src="images/node.png"><SPAN class=nodeText>Taylor Swift</SPAN></A><SPAN class=nodeDescription>Taylor Swift is a swell gall who is realy great.</SPAN></SPAN>
However when I insert it into the DOM and inspect the result using FireBug I find that the element has been transformed:
<span class="node" style="top: 0px; left: 0px;"<a class=nodeLink href="/SparklerRestService2.aspx?q={0}" name=http://dbpedia.org/data/Taylor_Swift.rdf>Taylor Swift</a><span class="nodeDescription">It's great</span></span>
Notice that the grandchildren of the node (the image tag and the span tag surrounding "Taylor Swift") are
missing, although strangely the great grandchild "Taylor Swift" text node has made it into the tree.
Can anyone shed some light on this behavior? Why would nodes disappear after insertion into the DOM, and why am I seeing the same result in all three major browser engines?
