$.clone() does not clone children of HTML5 elements in IE

[nickspacek]

Seems like a strange bug, but since IE doesn't really support HTML5 elements maybe not too surprising.

Sample is here: ​http://nickspacek.github.com/bug.html

The element itself is cloned, but not the children.

[nickspacek]

After doing some research, I have discovered (as was probably already known) that this is due to the lack of support in IE for HTML5, and jQuery's use of innerHTML to clone objects.

After reading that MooTools worked around the same issue as jQuery in a different way, I tried using that library to clone HTML5 elements. It almost worked, except that the tags come out prefixed with a ':'.

I'm not sure if there is a way around that, but it could be a possible solution. The tagName is reported without the ':', which I'm assuming IE is prepending because of XML namespace stuff.

[john]

Unfortunately there's not really a good solution here as any way we slice it we'll end up having to write a full HTML parser or a deep-element cloner - neither of which is desirable.

[Dylan Fogarty-MacDonald <[email protected]…>]

I encountered this bug and got around it with: $('html5element').get(0).cloneNode(true)