如何显示HTML生成的文本而不是标签

Question

I am using JQuery Dialog to display some text which has HTML tag included:

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

The JQuery which displays the data is:

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 invoked by an ASP LinkButton:

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

Although I am using the .html() to display the output, it is still showing the HTML tags instead of the output:

How can I modify the code so it generates the HTML tag instead of just displaying as plain text?

Answer 1

尝试这个：

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

Answer 2

in your span id "whatever the id is"

you can use .text():

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

this will strip all the html tags and then you can display it on your modal. you have to use your span id twice because the nature of the mechanism. this should work.

Answer 3

Remove the "dialog" div and "infoShow" tags since you don't need them.

Then, instead of writing to an existing div, just append a fresh div to the body element as a dialog, like so:

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 could 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 4

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

This syntax is wrong. You can't separate a class name and a jquery element with a comma, and wrap it with '$'. The comma is for css selectors like .gLine, .herpDerp