jQuery add id to an element that is being appended to the body
<p>I have the following function:</p>

<pre><code>simpleModal: function (data, id) {

        var responseHtml = data;

        // Append the modal HTML to the DOM
        var modalInstance = $('body').append(modalHtml);

        $(modalInstance).attr('id', id);

        $(id).find('.uiModalContent').width(480);
        $(id).find('.uiModalContent').height(320);

        // Hide the modal straight away, center it, and then fade it in
        $(id).find('.uiModal').hide().center().fadeIn();

        // Dynamically load in the passed data from the call
        $(id).find('.uiModalContent').html($(responseHtml));
        $(id).find('.uiModalContent').removeClass('loading');

        $(id).find('.ModalClose').live('click', function (e) {
            e.preventDefault();
            $(this).parents('.uiModal').fadeOut(function () { $(this).parents('.uiModalWrapper').remove() });
        });
    },
</code></pre>

<p>when called like:</p>

<p><code>uiModal.simpleModal('&lt;p&gt;An error has occured&lt;/p&gt;','TestError');</code></p>

<p>it should append the modal to the body with the passed content and give the modalHtml an id that is also passed. However it gets confused to appends the id to the body instead of the html. How do I get around this? Thanks</p>
