jQuery#html messes up when quotes are omitted around attribute values

[mathias]

For example,

$el.html('<a href=http://www.google.com/>foo</a> bar')

This would actually result in the following HTML:

<a href="http://www.google.com"></a>foo bar

Whereas it should be:

<a href="http://www.google.com/">foo</a> bar

Here’s a simple test case:  http://jsfiddle.net/mathias/9MgB4/

(Note that omitting these quotes is perfectly valid in HTML — they’re only required if the attribute value contains spaces or other special characters.)

[jitter]

Thanks for taking the time to contribute to the jQuery project by writing a bug report and providing a test case!

This is a known problem and you can check the ticket mentioned below for progress on this issue.

Replying to mathias:

(Note that omitting these quotes is perfectly valid in HTML — they’re only required if the attribute value contains spaces or other special characters.)

The  HTML 4.01 specification says about this:

In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.

and the  XHTML specification says:

All attribute values must be quoted, even those which appear to be numeric.

So in both HTML and XHTML the html snippet included in your report would be considered invalid. The HTML spec recommends quoting whenever possible and XHTML requires it. Only in HTML5 your snippet would be considered legal.

If the html string passed to .html() is under your control you really should be quoting the attribute values or workaround this issue by:

• having an attribute which doesn't end in / before the > (e.g. even an empty class="" will do)
• having a space between / and >

[jitter]

Duplicate of #6236.