单击按钮时如何将对话框添加到页面的主div中

Question

I have a log in button that when a user clicks on it a terms and condition dialog pops up and overlaps the contents on a page as follows

TermsSuccess: function (result, context) {

            var topTerms = findSetByInArray(result.Data, 'ParentId', 0);
            var termsHTML = '<div id="terms"><ul class="termsList">';
            for (var i = 0; i < topTerms.length; i++) {
                var cls = (topTerms[i].isNew) ? 'newTerm' : 'Term';
                termsHTML += '<li id=' + topTerms[i].ID + ' class=' + cls + '>'
                termsHTML += topTerms[i].PageIndex + '. ' + topTerms[i].Detail;
                termsHTML += getChildrenTerms(result.Data, topTerms[i].ID, topTerms[i].PageIndex + '. ');
                termsHTML += '</li>';
            }
            termsHTML += '</ul></div>';
            $(termsHTML).dialog({
                modal: true,
                resizable: false,
                width: 400,
                height: 600,
                closeOnEscape: false,
                open: function (event, ui) {
                    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
                },
                title: "Terms & Conditions",
                buttons: [{
                    text: "Decline",
                    "class": 'btnDialog',
                    click: function () {
                        $(this).dialog("close");
                    }
                },
                        {
                            text: "Accept",
                            "class": 'btnDialog',
                            click: function () {
                                betEvents.btnAccept_onClick();
                                $(this).dialog("close");                          
                            }
                        }]
            });
        }

I want this dialog to be appended to the following div on the page instead of it poping up over all the contents

<div id="mainarea"></div>

i tried to do something as the following but it doesnt work

function onClick(){
if $("#btnLogin").click(function(){
$('termsHTML').append('#mainarea');
});
}

your guidance will be appreciated.

Answer 1

Change this line:

$('termsHTML').append('#mainarea');

to

$(#mainarea).append(termsHTML);

and try again.

Explanation: $('termsHTML').append('#mainarea'); // here your selector is wrong