I like mustache.js but don't know if it works with jQuery-ui

As I have mentioned, I am currently looking for a templating engine in Javascript which will allow me to create great gobs of HTML things without the bulk of assembling them in jQuery. I couldn't get pure.js to work for me, but from the first with mustache.js, it was working close to how I was thinking.

Here is the specific function I want to generalize and make smoother. It uses jQuery-UI to make a pop-up.

// ========= ========= ========= ========= ========= ========= =========
// creates popup where you enter the accessions desired
// --------- --------- --------- --------- --------- --------- ---------
apr.accession_popup = function () {
    // I do this enough that I should make a specific library to handle
    // this style of popup

    // must investigate reformatting

    $( '#paste_from_spreadsheet' ).remove() ;
    $( '<div id="paste_from_spreadsheet" />' )
        .attr( 'title' , 'Add Accessions' )
        .dialog() ;
    $('.ui-dialog-titlebar-close')
        .click( function () {
            $( '#paste_from_spreadsheet' ).remove()
            } ) ;
    $( '<div/>' )
        .text(
            'Add one or more valid Accession IDs. ' +
            'When done, click "Go" or hit "Enter". '
            )
        .appendTo( '#paste_from_spreadsheet' ) ;
    $( '<textarea/>' )
        .attr( 'id' , 'spreadsheet' )
        .attr( 'name' , 'spreadsheet' )
        .appendTo( '#paste_from_spreadsheet' )
        ;
    $( '<div/>' )
        .attr( 'id' , 'spreadsheet_go' )
        .text( 'Go' )
        .appendTo( '#paste_from_spreadsheet' ) ;
    $('.ui-icon-closethick')
        .text( 'X' ) ;
    $( '#spreadsheet_go' ).click( function () {
        apr.add_accession( $( '#spreadsheet' ).val() ) ;
        $( '#paste_from_spreadsheet' ).remove()
        } ) ;
    $( '#spreadsheet' ).focus() ;
    } ;

And here is the version using mustache.js.

function my_popup () {
    $( '#paste_from_spreadsheet' ).remove() ;

    $( '<div id="paste_from_spreadsheet" />' )
        .attr( 'title' , 'Add Accessions' )
        .dialog() ;
    $('.ui-icon-closethick')
        .text( 'X' ) ;
    $('.ui-dialog-titlebar-close')
        .click( function () {
            $( '#paste_from_spreadsheet' ).remove()
            } ) ;
    var template = '\
    <div>\
        Add one or more valid Accession IDs.\
        When done, click "Go" or hit "Enter". \
    </div>\
    <textarea id="spreadsheet" name="spreadsheet" ></textarea>\
    <div id="spreadsheet_go"> Go </div>\
    ' ;
   var html = Mustache.to_html( template,'' ) ;
    $( '#paste_from_spreadsheet' ).append( html );
    $( '#spreadsheet_go' ).click( function () {
        apr.add_accession( $( '#spreadsheet' ).val() ) ;
        $( '#paste_from_spreadsheet' ).remove()
        } ) ;
    $( '#spreadsheet' ).focus() ;
    }

Notice that there isn't a lot of filling here. I can do filling, but half the time, I'll want to replace that textarea with an input type="text", which means that, if I dive in on this one, I'll have to use the awesome power of mustache.js in some way.

Right now, though, I'm not sure there's enough win there to make it worth my while, or if I could write my jQuery stuff better and make it work like I want it to.