Creating inline element without closing tag in IE fails

[jesse]

If you try to create an inline element by using $('<span>') without including the closing tag like $('<span></span>'), it won't work in Internet Explorer. There is no problem with block-level elements.

I have set up a demo showing that it is broken with <span> and <b> but not <div>:

 http://www.thefutureoftheweb.com/demo/2007-09-11-jquery-inline-ie/

It was working in 1.1.2 but broke in 1.1.4. It remains broken in 1.2.

[jesse]

Some more info..

alert($('<span>').length); alerts 0 in IE

I've traced it down to jQuery.clean, which wraps the <span> with the following:

div<div><span></div>

which IE interprets as:

div<DIV><SPAN></DIV></SPAN>

and when div.lastChild is thus <SPAN> which has no children.

I recommend either checking for this scenario and fixing it (like is done with XHTML-style tag), or finding some magical workaround which forces IE to add the closing tag in the right place.

Or maybe the div<div></div> is only used when <link> or <script> tags are present?

[jesse]

It seems wrapping with a table instead of a <div> might be okay. So instead of:

jQuery.browser.msie &&

[1, "div<div>", "</div>"]

it would be:

jQuery.browser.msie &&

[4, "<table><tbody><tr><td>", "</td></tr></tbody></table>"]

Not sure if this causes other issues with links and scripts or whatnot...

[arrix]

jesse, jQuery is designed to accept valid html. Try $('<span/>'), it works in IE as well as other browsers.

[john]

Jesse - Arrix is correct, you need to use valid HTML/XHTML - otherwise issues will occur. It happened to work previously, by chance, for some tags - but fails for others. The current solution works for all tags, in all browsers.

[mriffault]

Just posting an update about this issue, and provide a test case. This issue occur when trying to create an INLINE element WITH attributes. Without attributes, it works great. Using self-closing (slash) tag as mentioned in this ticket solve the issue too.

 http://jsfiddle.net/aZZPj/3/