IE7, HTML5 & Excess Tags with .after()

IE7, HTML5 & Excess Tags with .after()

I'm uncertain if this is actually a bug, or if I'm just too new to jQuery to know the correct way to handle this.

I'm working on my first HTML5 project, and as you're likely aware, several HTML5 elements aren't supported out of the box by IE7.  A JavaScript must be used to declare them.  The one I'm using looks like this (just an array of elements that's looped through and created):

  1.     <!--[if lte IE 8]>
        <script>
            // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
            (function(){if(!/*@cc_on!@*/0)return;var e = "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<e.length;i++){document.createElement(e[i])}})()
        </script>
        <![endif]-->






The jQuery I'm attempting to use simply adds elements in.

  1. function searchResultExpand(obj,articleID) /* note: obj is the item clicked */
    {
        var expandedArticle = '<article class="expanded"><p>test</p></article>';
       
        $(obj).fadeOut(0, function() {
            $(obj).addClass('collapsed');
            $(obj).after(expandedArticle);
        });   
    }








This works fine in Safari and Firefox.  Viewing the code with firebug, it checks out - and I've run everything through validators to ensure my code is legit.  But running through IE7 and using the developer toolbar, it parses the elements like this:

  1. <ARTICLE class="expanded"></ARTICLE><P>test</P></ARTICLE><//ARTICLE>

However when I change the article tag to a div, the problem goes away.

I'd like to use the article tag, particularly since the project is a list of articles and semantically it makes a lot of sense.  But it has to be done by Friday, so perhaps I should resort to DIVs for now?