IE not converting string to HTML using jquery

Question

I am passing a string to a table where some of the classes contains html markup in a string (img). After a conversion post appending this table using innerHTML works great in chrome and FF but not IE.

Here is the code that looks something like this:

var dfd = $.Deferred();
        var requestParams = {};
        templatingIsDone = jsonRequest(ResolveUrl("~/Results/ResultsService.asmx/GetMostRecentUploadsService"), requestParams).success(function (data) {
            if (data.Success == true) {
                var jheaderResults = $("#jobheaderResults tbody");  //HTML Markup
                try {
                    jheaderResults.empty();
                    var results = data.Results;

                    $.tmpl("jobHeaderTemplate", data.Results).appendTo(jheaderResults);

                    var allCaterLinks = $(".CaterRequestLinking");
                    $.each(allCaterLinks, function (index, value) {
                        if ($.browser.msie) {
                            value.innerHTML = value.innerText;
                        } else {
                            value.innerHTML = value.textContent;
                        }
                    });

                    $("#jobheaderResults tbody").trigger("update");

The result shows its image in Firefox and Chrome in the table "jobheaderResults". However IE does not render the image and instead shows the html markup instead. How do I convert this to HTML?

I have also tried the following code but to no avail:

                  //value.innerHTML = value.empty().html(value.innerHTML);
                  //value.innerHTML = value.textContent;
                  //value.innerHTML = value.innerHTML.html();
                  //value.html(value.innerText);
                  //value.innerHTML = value.outerText;

None of the above worked, they all failed to render the image onto IE.

For extra information, the actual markup that I am trying to convert is:

"<a href=\"#\" class=\"caterReqClass\"><img src=\"/HWVDB/images/Cater-Icon.jpg\" alt=\"CaterReqAlternate\"/></a>"

Answer 1

Try this

    $.each(allCaterLinks, function () {
        $('.allCaterLinks').html($('.allCaterLinks').text());
    });

This should work in all browsers. From jQuery.com: "This (.html()) method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters."