jQuery(element).html() returns the wrong value if self-closing tags are contained within

[Firehed]

When you use the html() function, self-closing tags are grabbed improperly - eg. <input type="text" name="somename" /> becomes >input type="text" name="somename"> (the self-closing slash is removed). This appears to be a problem with the innerHTML method in javascript itself.

Example code:

HTML:

<div id="formBuilderArea"><p><input type="submit" /></p></div>

<div id="results"></div>

JS in ready():

jQuery("#results").html('<xmp>'+ jQuery("#formBuilderArea").html()+ '</xmp>'); xmp for ease of debugging

Expected result: #results contains <p><input type="submit" /></p>

Actual result: #results contains <p><input type="submit"></p>

This happens both with jQuery('#e').html() and document.getElementById('e').innerHTML in both Firefox3 and Safari.

After some extensive searching on the subject, I found someone who had posted a general workaround to this problem. The post and solution are available at  http://www.jamesv.org/2007/06/01/like-innerhtml-except-not-as-broken/

I've tested the code at the linked page and it solves the problem entirely. The workaround is sufficient, but jQuery.html() should handle it automatically.

This generally doesn't cause problems with something that only occurs client-side, but becomes problematic when doing AJAX requests of actual HTML snippets, since this kills XML validity and thus interferes with the processing on the other side of the AJAX request.

[dmethvin]

Self-closing tags are only supported by browsers that understand XHTML doctypes, and with XHTML documents. Most likely your documents are not XHMTL, or you are using IE which does not support XHTML. In any case, since the browser itself is performing this transformation, jQuery can't do much about it.