Jquery html() and self closing tags

Question

While creating self contained elements with Jquery html() the following issue happens:

$('#someId').html('<li><input type="checkbox" /></li>')

will create

<li><input type="checkbox"></li>

It closes correctly the <li> tag but not the <input>

It seems its an issue from innerHtml which is used in the html() function.

I have looked everywhere and found a solution for this but the page is not available anymore as you see in: http://dev.jquery.it/ticket/3378

Anybody knows how to fix this?

Answer 1

To clarify, this is valid HTML:

<input type="checkbox">

and this is valid XML (including XHTML):

<input type="checkbox"/>

but it is not valid HTML. That being said, most browsers will probably accept it anyway (but the document will fail validation if that means anything to you).

html() uses innerHTML. In IE and possibly other browsers this has issues because XHTML is still modeled as an HTML DOM. See Internal IE-HTML DOM still isn’t XHTML compliant.

Basically, there is very little reason to use XHTML. It's a cross browser nightmare. For a detailed synopsis as to why see XHTML - Is writing self closing tags for elements not traditionally empty bad practise?, particularly the first answer.

Answer 2

Have a look at this previous post: http://stackoverflow.com/questions/1490909/is-it-expected-that-jquery-span-html-turns-xhtml-br-tag-to-html-syntax