Bug Tracker

Opened 14 years ago

Closed 13 years ago

Last modified 13 years ago

#3378 closed bug (invalid)

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

Reported by: Firehed Owned by: flesler
Priority: minor Milestone: 1.3
Component: unfiled Version: 1.2.6
Keywords: Cc:
Blocked by: Blocking:


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:


<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.

Change History (1)

comment:1 Changed 13 years ago by dmethvin

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.