jquery .text doesn't render HTML elements into the DOM

Question

Hi

I am loading a list of images into a div with the following bit of jQuery :

                var jewellerDdl = "<%= JewellerDropDownList.ClientID %>";
                var filter = $("#" + jewellerDdl).val();

                $.ajax({
                    type: "POST",
                    url: "popup.aspx/GetJewellerAssets",
                    contentType: "application/json; charset=utf-8",
                    data: '{"jewellerId":' + filter + '}',
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });

                function AjaxSucceeded(result) {
                    $("#divEntryDisplay").text(result.d);
                }

                function AjaxFailed(result) {
                    alert(result.status + ' - ' + result.statusText);
                }

The string I get back is a <ul> containing a few images

However, the .text method doesnt add them to the dom. Instead it just prints the HTML as text inside the <div> called divEntryDisplay

What have I done wrong?

Answer 1

Try this instead: $("#divEntryDisplay").html(result.d);

Answer 2

If you insert HTML code into the DOM, then you must use the html() method, not the text() method.

Answer 3

You should indeed use the html method (cf. documentation here : http://docs.jquery.com/Attributes/html)

Which makes your function look like this:

 function AjaxSucceeded(result) {
    $("#divEntryDisplay").html(result.d);
 }