How to render HTML by passing it as a text in Javascript

I had message which is generated from the system and it consist of including a URL with an anchor tag in a Jquery model popup. I usually keep my strings/messages in resource files.  In this case it had a place holder to be replaced with the URL.

As an example,

“Please <a class=’link_color’ href='{url}?returnUrl={path}’>CLICK HERE</a> to Log in.<br/><br/>If you have not signed up <a class=’link_color’ href='{regurl}?returnUrl={path}’>CLICK HERE.</a>”

It was rendering above text as it is in the popup without rendering the HTML tags as hyperlinks,

When I checked the message that was assigned to the popup, its as follows,

“Please &lt;a class=’link_txt_color’ href=’/Account/LogOn?returnUrl=/Deal/4856/victorias-discount-bridal-service#.USIBq2dy18v’&gt;CLICK HERE&lt;/a&gt; to Log in.&lt;br/&gt;&lt;br/&gt;If you have not signed up &lt;a class=’link_txt_color’ href=’/Account/CreateNewUser?returnUrl=/Deal/4856/victorias-discount-bridal-service#.USIBq2dy18v’&gt;CLICK HERE.&lt;/a&gt;”

This is not what I expected to render in the popup.  So I created a div tag dynamically (with jQuery its very simple $(“<div/>”)) and assigned the above message as a HTML. Then I took the text rendered in the div, and assigned that to the popup. There you go, nicely rendered with anchor tags.

Sample code:

$("#popup").html($("<div/>").html(s).text());

s – is the altered message with actual URLs

Note that, in this way you can deal with any html tags. If the tags are rendered as text, get the text and assigned it back as HTML.