Geek Answers Handbook

IE7 / 8 + <time> tag + jQuery.clone () =?

I will talk about this by saying that I have already solved this problem by fundamentally changing my approach. But in the process of solving it, I put together a test case that fascinates and annoys me.

I have a string returned from an AJAX call. The string contains HTML, most of which are useless. I want one element from a string (and all its children) to be inserted in the DOM. Modeling this:

<!DOCTYPE html> <html> <head> <title>wtf?</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function() { var markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>', output = $(markup).find('.good').clone().wrap('<div />').parent().html(); $('body').append(output); }); </script> </head> <body></body> </html>

I have a hosted copy of this file here: http://alala.smitelli.com/temp/wtf_ie.html (will not be forever).

What you need to do is extract the .good div and child <time> , and then paste them into the body. I am doing .wrap().parent() to retrieve the element that I selected in addition to its children (see this question ). .clone() and .html() are devices that demonstrate the problem.

The user must show today's date. And it works in Chrome, Firefox, IE9, etc .:

 March 29, 2013

But in IE7 and 8 the displayed text is:

 <:time datetime="2013-03-29">March 29, 2013

The opening < displayed, and the colon was somehow inserted. The closing </time> appears unaffected and does not appear to be escaped.

What's going on here? Is this some kind of error or expected behavior? Where does the colon come from?

EDIT: Regarding suggestions for adding document.createElement('time') or html5shiv, none of them seem to have changed the behavior.

+4
source share
1 answer

Very much , to my surprise, I believe that if I remove jQuery from the equation in terms of the actual parsing of the markup, the problem will disappear (both on IE7 and IE8), even without createElement('time') or padding / shiv:

 <!DOCTYPE html> <html> <head> <title>wtf?</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function() { var div, markup, output; markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>'; div = document.createElement('div'); div.innerHTML = markup; output = $(div).find('.good').clone().wrap('<div />').parent().html(); $('body').append(output); }); </script> </head> <body></body> </html>

Live Copy | A source

The change is that I just use my own innerHTML browser processing and a disabled div for parsing markup , instead of letting jQuery do this for me.

So, I have to say that this could be a problem processing jQuery HTML snippets in older browsers without support for HTML5 elements. But this will be an essential requirement, and substantial claims require significant evidence ...

But if I change these lines:

 div = document.createElement('div'); div.innerHTML = markup; output = $(div).find('.good').clone().wrap('<div />').parent().html();

in

 div = $(markup); output = div.find('.good').clone().wrap('<div />').parent().html();

I have a problem (on IE7 and IE8): Live Copy | A source

So this is starting to seem like a jQuery problem ...

+2
source

More articles:


All Articles