Bubble Foundry

HTML and XML Character Encoding Gotchas in Javascript

by Peter.

Recently I was trying to execute the following Javascript with jQuery: $("#someid").append("<div>...&deg;C</div>");

I was going crazy because it worked (a degrees symbol – ° – was shown) on one page but not another, where nothing was displayed or returned by the append method. After much frustration I stumbled on a solution and I’m sharing it here to hopefully save others some time.

I was stumped but luckily I ended up reading the Wikipedia page on character encoding in HTML and learned that XML has a much smaller set of character entity references. In fact, there are only five: &amp; → &, &lt; → <, &gt; → >, &quot; → “, &apos; → ‘. Makes sense, since you should be using UTF-8.

As it turns out, my working example was an HTML page while the non-working one was XHTML. Because of the XHTML content-type declaration the parser (I’m not sure whether in jQuery or my browser) was choking on the invalid character entity reference and failing completely. So, problem solved, though I wish the single offending entity was dropped, not the whole string!