Html 5 Time Tag not recognized by IE8 when cloning

Question

I have been having trouble getting IE to recognize the new Time tag in this context. This all works great in FF. Here is the code:

var origComment = $('.articleComment:first div');
if (origComment.length > 0) {
var commentHtml = origComment.clone(true);
commentHtml.find('time').text('today');
var html = '<article class="' + ((side == 'LEFT') ? '' : 'that') + '">' + commentHtml.html() + '</article>';
$(html).insertAfter('.articleComment:last');

The HTML looks something like this:

<article class="articleComment that">
<div id="156" class="parent">
    <div class="byline">
    <p>Posted <time pubdate="pubdate" datetime="2010-05-07T09:11:08">today</time> by<br/>
        <a class="username" href="/u/matt">matt</a>
        </p>
        <p class="report"><a href="#">Report?</a></p>
    </div>
    <div class="comment">left</div>
</div>
</article>

IE can find the Time tag but it returns a collection of 2 elements. I assume the beginning and ending. However, I cannot access it to modify it. I have tried val(), html() and text(). I also can't drop to the actual HTMLElement. I can't get(0).innerHTML. But, if I .get(0).tagName it actually is the Time tag I've got.

Any ideas? I hope this makes sense.

Answer 1

Delan Azabani is correct about IE 8 and it's support of those new HTML5 elements. It doesn't.

A nice way to handle "down-level" support is to use this shiv.

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

Found here: http://code.google.com/p/html5shiv/

It even supports printing in IE<9 which is a sticky issue if you need it.

Answer 2

IE 8 doesn't support HTML 5.

Edit

To increase compatibility in the DOM for new tags, run the following code in a script block in the head:

var h5tags = 'abbr,article,aside,audio,bb,canvas,datagrid,datalist,\
 details,dialog,eventsource,figure,footer,header,\
 hgroup,mark,menu,meter,nav,output,progress,section,\
 time,video'.split(',');
for (var i = 0; i < h5tags.length; i++)
  document.createElement(h5tags[i]);

Another edit: I was going to use .forEach() in the above code, but, oh wait... IE 8 doesn't support JavaScript 1.6. Yeah.