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.