How to display HTML generated text instead of tags

Question

I am using jQuery Dialog to display some text with HTML tag enabled:

<div id="dialog" style="display: none"> <p id='infoShow'></p> </div> 

JQuery that displays data:

 function test(element) { $("#infoShow").html($(".gLine", $(element).closest("tr")).html()); $("#dialog").dialog({ title: "View Guideline", buttons: { Ok: function () { $(this).dialog('close'); } }, modal: true, width: "450px" }); } 

It is called by ASP LinkButton:

 <asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" OnClientClick="javascript:test(this);return false;"></asp:LinkButton> 

Although I use .html() to output the output, it still shows HTML tags instead of the output:

How can I change the code to generate an HTML tag instead of just displaying as plain text?

Answer 1

Remove the "dialog" and "infoShow" tags as you do not need them.

Then, instead of writing to an existing div, simply add a fresh div to the body element as a dialog, for example:

 function test(element) { $("<div></div>").appendTo('body') .html($(".gLine", $(element).closest("tr")).html()) .dialog({ title: "View Guideline", buttons: { Ok: function () { $(this).dialog('close'); } }, modal: true, width: "450px" }); } 

Or you can do it like this:

 function test(element) { $("<div>" + $(".gLine", $(element).closest("tr")).html() + "</div>").appendTo('body') .dialog({ title: "View Guideline", buttons: { Ok: function () { $(this).dialog('close'); } }, modal: true, width: "450px" }); } 

Answer 2

Try the following:

 $("#infoShow").append( $( HTML_TEXT_STRING)); 

Answer 3

in your span id "no matter what id"

you can use .text ():

 $('#your-span-id').text($('#your-span-id').text()); 

this will separate all the html tags and then you can display them on your modal. you need to use span identifier twice because the nature of the mechanism. that should work.

Answer 4

 $(".gLine", $(element).closest("tr")) 

This syntax is invalid. You cannot separate the class name and jquery element with a comma and wrap it with "$". Comma for css selectors such as .gLine, .herpDerp