Adding custom HTML to the jQuery dialog button bar

Question

I want to add some custom HTML between the buttons in the jQuery dialog box (specifically a span that contains the word "or").

Javascript I have something like this:

$("#foo").dialog({ autoOpen: false, width: 600, modal: true, resizable: false, buttons: { save: { text: 'Save', class: 'form-finish form-submit', click: function() { … } }, cancel: { text: 'Cancel', class: 'form-cancel', click: function() { $( this ).dialog( "close" ); } } } }); 

The generated HTML is:

 <button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button> <button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button> 

I want this:

 <button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button> <span class="article">or</span> <button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button> 

Is there a way to do this without hacking the jQuery UI core? Thanks!

Answer 1

Do something like this after creating a dialogue?

  $(".form-finish").after("<span class='article'>or</span>");