Jquery Inserted Html Is Rendered as a Raw Text

Question

I have weird situation, I have that string

lorem&lt;br/&gt;&lt;br/&gt;ipsum&lt;br/&gt;&lt;br/&gt;a&lt;br/&gt;b&lt;br/&gt;&lt;br/&gt;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 ?

Accepted Answer

You can just trick it with a little jQuery parsing

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

Accepted Answer

$('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.

Answer 3

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.

3 Answers