jQuery adding self-closed DIV tag in IE8

The code below sets up an edit interface from the data that is already on the form, which works fine. Except that according to this msdn article, any tag that is self closed (ex: <div />) does not have an innerhtml property. This makes it so my personal jscript calendar library chokes on the innerHTML assignment to the div that is being cre开发者_开发技巧ated.

fields.find("p[item][type='Calendar']").each(function() {
            index++;
            var currentText = $(this).html();
            $(this).html("<input id=\"calInput" + index + "\" type=\"text\" value=\"" + currentText + "\" /><div id=\"cal" + index + "\"></div>");
            myFactory.newCalendar("cal" + index, "calInput" + index);
        });

How can I force jQuery to use the html I've outlined below instead of creating the self-closed div?

Edit: The html code that results from the above is:

<div id="cal2" style="" class="jcalStyle hide"/>

I need it to be:

<div id="cal2" style="" class="jcalStyle hide"></div>

Edit 2:

Firefox is generating the HTML properly. I don't know why IE8 is self-closing (voiding?) the div.

The article isn't saying that self-closing tags have no innerHTML. It's saying that tags with the empty content model (void elements, in spec-speak, like img) don't have it.

Note also that in HTML, div cannot be written <div/> (reference). It must be written <div></div>. Many, many tools (jQuery, for instance) let you play fast and loose with the rules, but don't worry, jQuery isn't actually adding that tag to your page markup (it's adding the element to the DOM, which is a different thing entirely). That <element/> syntax is only allowed on void elements (like img) and foreign elements (like SVG stuff).