jquery inserted HTML is rendered as a raw text

I have weird situation, I have that string

lorem<br/><br/>ipsum<br/><br/>a<br/>b<br/><br/>c

which is put into a div:

$('div.desc').html(that_string);

or

$('div.desc').html($.parseHTML(that_string));

but in both cases it is being rendered as a raw text:

lorem<br/><br/>ipsum<br/><br/>a<br/>b<br/><br/>c

instead of

lorem
ipsum
a
b
c

Why ?

3 Answers

You can just trick it with a little jQuery parsing

$('div.desc').html( $('<div />').html(that_string).text() );

FIDDLE

$('div.desc').html(decodeURI(that_string));
//OR
$('div.desc').html($.parseHTML(decodeURI(that_string)));

The decodeURI() function will decode the string so it will output <, > etc.

I had a similar problem with jQuery where raw HTML was being rendered as text. I fixed it by doing the following:

Target: var txt = <h3> Hello <b>World</b><h3>

$(#class).text(txt) to

$(#class).html(txt)

Now the content is being displayed on the website as HTML.