How does this dialog invoking code work

How does this dialog invoking code work

I am new to jquery and do not understand exactly what is happening.  I am opening a dialog using the ajax API.    I understand how this selector is suppposed to work - $('#'+divId).  The element being selected by '#'+divId is actually a div where I want the dialog to be opened.

What I do not understand is what the .html(data) does before the .dialog().  The data is being returned from the successful ajax API.  The value of data appears to be "longString".  I determined this using firebug.

When I read about the html() API it seems to indicate that by applying this chained API it changes the selected element to have the value of "longString".  I assume this is how my ajax data gets passed to the dialog.  But, I do not understand the details.  I copied this code from a sample on the web.  It works but I want to know what is going on.

To make matters more confusing, the original dialog() is followed by a chained .dialog('ope').dialog();

I can't even guess what this accomplishes. 

Can someone please explain?  Thanks. 

$('#'+divId).html(data).dialog({
                    autoOpen : false,
                    resizable : true,
                    width : 800,       
                    modal : true,
                    hide: 'explode',
                    show : {
                        effect : 'drop',
                        direction : 'up'
                    },
                    title : title,
                    beforeClose : function() {
                    },
                    cancel: function() {
                        $( this ).html('');
                        $( this ).dialog( 'destroy' );
                    },
                    close: function() {
                        $( this ).html('');
                        $( this ).dialog( 'destroy' );
                    }
                }).dialog('open').dialog();