CODEWITHSUNDEEP
javascripthtmlgoogle-chrometitle
davegaeddert
davegaeddert

Reputation: 3339

Setting HTML "title" attribute with JS doesn't render &

What is the proper way to use an ampersand in the title attribute? I would have assumed that you should use &, but it gives different behavior depending on whether it was set in the original HTML or modified with JS.

Tooltip rendering in Chrome (Version 47.0.2526.106 (64-bit)) and Safari (Version 9.0.2 (11601.3.9)):

enter image description here with JS

https://jsfiddle.net/davegaeddert/femm9b96/

Upvotes: 5

Views: 722

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92334

That's because setAttribute does not parse attributes as HTML. See the specification for Node.setAttribute

When directly in the HTML, it will be parsed for HTML entities

Excerpt

This value is a simple string; it is not parsed as it is being set. So any markup (such as syntax to be recognized as an entity reference) is treated as literal text

https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082

Upvotes: 0

Quentin
Quentin

Reputation: 944564

& means & in HTML.

& means & when you are directly manipulating the DOM using a DOM API.

If you aren't writing HTML, don't use HTML entities.

Upvotes: 3

Ian Clelland
Ian Clelland

Reputation: 44192

The method is different depending on how you set it. In raw HTML, you have to escape the ampersand, and your fiddle is doing it correctly:

title="&"

In JavaScript, you can just use "&" in a string:

jQuery("#with-js").attr("title","&");

Upvotes: 0

Related Questions