Cloning HTML5 elements in IE 6-8. Who will figure out how to get around the bug?

S

SilentImp2010-11-19 14:47:05

JavaScript

SilentImp, 2010-11-19 14:47:05

Have a nice time of the day.
Found a kind of bug.
After adding

&lt;!--[if lt IE 9]&gt;
    &lt;s&#99;ript src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/s&#99;ript&gt;
    &lt;![endif]--&gt;

HTML5 elements in IE 6-8 render fine.
But if you clone a node with HTML5 elements using .cloneNode(true) or jQuery .clone(true), then all HTML5 elements will be lost.
As the .innerHTML of the cloned node shows, it becomes <:nav></:nav>.
If you clean up innerHTML with a regular expression... the elements just disappear without a trace.
Any ideas how to get around this bug without creating a fairly complex node hierarchy element by element?
With respect and hope for an answer.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sererator, 2010-11-19
@Serator

Played around a bit in IE8 and found a solution. For those who do not understand, I will lay out an example for the author (who was either too lazy, or ...). Without jQuery of course :)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.querySelector('body').appendChild(document.querySelector('nav').cloneNode(true));
console.log(document.querySelectorAll('nav')[1]);
document.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));
console.log(document.querySelectorAll('div')[1]);
</script>
</body>
</html>

As a result, we see in the console:
LOG: undefined
LOG: [object HTMLDivElement]
If ie doesn’t want it for good, then we kill him with his own weapon:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.querySelector('body').innerHTML+=document.querySelector('nav').outerHTML;
console.log(document.querySelectorAll('nav')[1]);
document.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));
console.log(document.querySelectorAll('div')[1]);
</script>
</body>
</html>

In the console we see:
LOG: [object HTMLGenericElement] LOG
: [object HTMLDivElement]
PS For the future, lay out ready-made examples without any jQuery and other crap.

S

Sererator, 2010-11-19
@Serator

ie6:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="demo">
1
</nav>
<div>
2
</div>
<script>
document.body.innerHTML+=document.getElementsByTagName('nav')[0].outerHTML;
alert(document.getElementsByTagName('nav')[1]);
document.body.appendChild(document.getElementsByTagName('div')[0].cloneNode(true));
alert(document.getElementsByTagName('div')[1]);
</script>
</body>
</html>