Ticket #3378 (closed bug: invalid)
jQuery(element).html() returns the wrong value if self-closing tags are contained within
|Reported by:||Firehed||Owned by:||flesler|
<div id="formBuilderArea"><p><input type="submit" /></p></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.