HTML and XML Character Encoding Gotchas in Javascript
December 8th, 2009Recently I was trying to execute the following Javascript with jQuery: $("#someid").append("<div>...°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: & → &, < → <, > → >, " → “, ' → ‘. 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!