jQuery's attr() function breaks html with html special characters?

Question

Please take a look at the following code:

http://jsfiddle.net/htdTg/2/

In the first link there is a title attribute containing the html special character < followed by "!" (it doesn't matter which character it is followed by actually). When we take the value of that title attribute with jQuery's attr() function the html is broken (you can see that there is no "<" character printed as long as the following text is also missing.

In the second link the only difference is that I have added a space after < and now it works as expected.

Do you think it's a bug in jQuery or I just don't understand something?

PS. If you think I'm doing something strange - it's just some piece of code from some tooltip plugin.

HTML:

<a href="#" title="<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>">This is a link</a><br>
<a href="#" title="<div style='color:red'>This is the less than sign: &lt; ! Now you know it?</div>">This is a link</a><br>​

jQuery:

$('a').each(function() {
    $('body').append($(this).attr('title')); });

// just to exclude that it's append() function's fault :)
$('body').append("<div style='color:red'>This is the less than sign: &lt;! Now you know it?</div>");​

Answer 1

This is pretty interesting. I looked up what text can be in a title attribute and the reference says:

User agents should interpret attribute values as follows:

1. Replace character entities with characters,
2. Ignore line feeds,
3. Replace each carriage return or tab with a single space.

Apparently, this is the expected behavior. < is being parsed as < by the browser, which might be interpreted as HTML by jQuery.

You should be escape the ampersand as well:

<

Demo: http://jsfiddle.net/htdTg/9/

Even better demo: http://jsfiddle.net/PsZeY/6/

Answer 2

Why its happening?

This is happening because &lt;! Now you know it? </div> is converted to <! Now you know it? </div-->

According to HTML standard <! and > is the start and end of comment structure. Note this is comment structure not comment. Hence browwer converts the rest as comment unless it gets a end delimiter >.

From W3C

<!-- this is a comment -->
<!-- and so is this one,
    which occupies more than one line -->

White space is not permitted between the markup declaration open delimiter(<!) and the comment open delimiter (--), but is permitted between the comment close delimiter (--) and the markup declaration close delimiter (">"). A common error is to include a string of hyphens (---) within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.

Also in here

The syntax for comment declarations in SGML is

 comment declaration =
    MDO ("<!"), (comment, ( s | comment )* )?, MDC (">")
 comment =
    COM ("--"), SGML character*, COM ("--")

How to solve it?

You already know it. use & to replace &. So write <! instead of <!. This will make < appended to body element instead of <! which is comment structure opening.