Are single/double quotes allowed inside HTML attribute values?

Question

I\'m trying to set attribute value that contains a single quote:

var attr_value = \"It\'s not working\";
var html = \"

        

Answer 1

var attr_value = "It's not working"

Answer 2

Yes, both quotes are allowed in attribute values, but you must HTML-escape the quote you're using as an attribute value delimiter, as well as other HTML-special characters like < and &:

function encodeHTML(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;').split("'").join('&#39;');
}

var html= '<label my_attr="'+encodeHTML(attr_value)+'">Text</label>';

However, you are usually much better off not trying to hack a document together from HTML strings. You risk bugs and HTML-injection (leading to cross-site-scripting security holes) every time you forget to escape. Instead, use DOM-style methods like attr(), text() and the construction shortcut:

$('body').append(
    $('<label>', {my_attr: attr_value, text: 'Text'})
);

Answer 3

Use double-quotes as the attribute delimiter:

var html = "<label my_attr=\"" + attr_value + "\">Text</label>";

Answer 4

You can use single quotes inside double quotes or double quotes inside single quotes. If you want to use single quotes inside single quotes or double quotes inside double quotes, you have to HTML encode them.

Valid markup:

<label attr="This 'works'!" />
<label attr='This "works" too' />
<label attr="This does NOT \"work\"" />
<label attr="And this is &quot;OK&quot;, too" />