Jquery html() encoding error in chrome

Question

I'm developing an Java Web Application, I used some jQuery and a REST web services that output an JSON object with a list of Javascript objects using AJAX. All is ok but when I try to fill a table created with Javascript using jQuery.html() to a valid div, all hell broke loose in Chrome, including this

Error: INVALID_STATE_ERR: DOM Exception 11

in the Javascript console.

The problem is like this, try this in chrome Javascript console:

$('#ValidadorWrapper').html("<div>AMOXICILIN 100 C&amp;psulapsula</div>"); 

But if we delete the ampersand, it works

$('#ValidadorWrapper').html("<div>AMOXICILIN 100 Camp;psulapsula</div>"); 

This problem happens only in Chrome, I suspect it has something to do with the encoding characters but I cant' find any way of doing it. Obviously I need to input an & ( i mean the & entity) in this document.

Some steps I have tried and didn't work:

1. I'm using the gson library to output a String to an JSP page. My JSP page have this header <%@page pageEncoding= "UTF-8" contentType="text/html; charset=UTF-8" %> . This was my first attempt and didn't work when an ampersand appeared in my JSON object (well any special char).

2. My second attempt was using the HTMLEntities Java library to encode all special chars. This is the actual version and it still doesn't work

3. Using unicode chars like \& doesnt work either

There is something more strange. Apparently if I use $('#ValidadorWrapper').html("AMOXICILIN 100 \&"); it works!, but this is just an example. I'm trying to fill an HTML table with my object so I really need to put that data inside html (table) tags

Answer 1

尝试这个：

$('<div></div>').appendTo('#ValidadorWrapper').text('AMOXICILIN 100 C&aacute;psulapsula');