jQuery outputting .html inside another .html and getting inadvertent encoding -- how do I fix this?

I have the following code:

ajaxLoading = '\<p style="text-align:center; margin-left:auto; margin-right:auto; margin-top:200px; ' + 
'width:300px\"><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment" />'  + 
'Processing your pa开发者_如何学Pythonyment...</p>'
var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + 
"</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + 
"$('#divIDConfirmPaymentResult').html(" + ajaxLoading + ");RequestPayment()\"> Click here to return to payment </a></p></div>";
                        $('#divIDConfirmPaymentResult').html(errormessage); 

The relevant part of my output according to Chrome Dev Tools is this. As you can see, one < is being escaped as &lt, and it is ruining the rest of the output. What could be causing this?

<a onclick="$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();$('#divIDConfirmPaymentResult').html(&lt;p style=" text-align:center;="" margin-left:auto;="" margin-right:auto;="" margin-top:200px;="" width:300px"=""><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment">Processing your payment...</a>

Update per the below answer:

This works perfectly well:

var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + 
                        "</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + 
                        "resetAjaxLoading('#divIDConfirmPaymentResult');\"> Click here to return to payment </a></p></div>";
                        $('#divIDConfirmPaymentResult').html('\'' + errormessage + '\'');   

            function resetAjaxLoading(domElement) {
                ajaxLoading = '<p style="text-align:center; margin-left:auto; margin-right:auto; margin-top:200px; ' + 
                        'width:300px\"><img style="display:block; margin-left:auto; margin-right:auto" src="Images/ajax-loader.gif" alt="Processing Payment" />'  + 
                        'Processing your payment...</p>'; 
                $(domElement).html(ajaxLoading);
            }

---

EDIT: Actually I don't think you can have html defined in an inline handler like onclick in your example. Move the click handler to separate definition (in a script tag or separate js file).

You could also try (assuming ajaxLoading is a variable) to defer setting html to after user clicks the link (note that I'm not putting the content of ajaxLoading variable into the errormessage variable - the string ajaxLoading will be evaluated to the value of the variable during handle of a click event):

var errormessage = "<div style=\"padding-left:75px\"><h1 style=\"margin-top:50px\">Error</h1><p>" + data + "</p><p><a onClick=\"$('#divIDConfirmPayment').slideRightHide();$('#divIDCollectPaymentInfo').slideLeftShow();" + "$('#divIDConfirmPaymentResult').html(ajaxLoading);RequestPayment()\"> Click here to return to payment </a></p></div>";
                    $('#divIDConfirmPaymentResult').html(errormessage);