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


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
16 views
A pleasant time of day.


Found a peculiar bug.

After adding

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->



HTML5 elements in IE 6-8 are displayed normally.

But if you clone a node with HTML5 elements using .cloneNode(true) or jQuery .clone(true), then all the HTML5 elements are lost.

How shows .innerHTML of the cloned node becomes <:nav></:nav>.

If you clean the innerHTML with a regular expression... the items just disappear without a trace.


Are there any ideas how to bypass this bug without creating a bitmap fairly complex hierarchy of nodes?


With respect and hope for a response.
by | 16 views

2 Answers

0 like 0 dislike
A little play in IE8 and found a solution. For those who do not understand, I will lay out an example for the author (which is lazy, you know...). Of course, without jQuery :)
\r
\r
<!DOCTYPE html>\r\r\rSample\r<!--[if lt IE 9]>\r\r<![endif]-->\r\r\r
\r
2
\r\rdocument.querySelector('body').appendChild(document.querySelector('nav').cloneNode(true));\rconsole.log(document.querySelectorAll('nav')[1]);\rdocument.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));\rconsole.log(document.querySelectorAll('div')[1]);\r\r\r\r
\r
As a result, in the console we see:
\r
LOG: undefined
LOG: [object HTMLDivElement]
\r
If ie does not want for good, then moisten it with his own weapon:
\r
\r
<!DOCTYPE html>\r\r\rSample\r<!--[if lt IE 9]>\r\r<![endif]-->\r\r\r
\r
2
\r\rdocument.querySelector('body').innerHTML+=document.querySelector('nav').outerHTML;\rconsole.log(document.querySelectorAll('nav')[1]);\rdocument.querySelector('body').appendChild(document.querySelector('div').cloneNode(true));\rconsole.log(document.querySelectorAll('div')[1]);\r\r\r\r
\r
In console we see:
\r
LOG: [object HTMLGenericElement]
LOG: [object HTMLDivElement]
\r
PS For the future lay ready examples without jQuery and other crap.
by
0 like 0 dislike
ie6:
\r
\r
<!DOCTYPE html>\r\r\rSample\r<!--[if lt IE 9]>\r\r<![endif]-->\r\r\r
\r
2
\r\rdocument.body.innerHTML+=document.getElementsByTagName('nav')[0].outerHTML;\ralert(document.getElementsByTagName('nav')[1]);\rdocument.body.appendChild(document.getElementsByTagName('div')[0].cloneNode(true));\ralert(document.getElementsByTagName('div')[1]);\r\r\r\r
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
asked May 11, 2019 by UnluckySerivelha
0 like 0 dislike
1 answer
0 like 0 dislike
6 answers
110,608 questions
257,186 answers
0 comments
27,902 users