javascript - jQuery Append/Add Hidden div to jQuery Dialog -

i'm trying append/add div element within html file dialog box (which has buttons). div hidden on page load css class 'hide'

html div:

<section>             <div id="deliverymethod" title="delivery method" class="hide">                 <p>please select delivery method , special requirements.</p>                                     <ul>                     <li>                         <label>method:</label>                     </li>                     <li>                         <div>                             <select for="deliveryservice">                                 <option value="">please select...</option>                                 <option value="fedex">fedex</option>                                 <option value="ups">ups</option>                             </select>                         </div>                     </li>                     <li>                         <label>special requirements:</label>                                                 </li>                     <li>                         <textarea id="specialrequirements" type="text" value=""  maxlength="220"></textarea>                     </li>                 </ul>             </div>     </section> 

css class = hide

.hide {   border: 0;   clip: rect(0 0 0 0);   height: 1px;   margin: -1px;   overflow: hidden;   padding: 0;   position: absolute;   width: 1px; } 

jquery when buttion clicked, below function called:

function deliveryserviceclick() {  $("#dialogdiv").dialog("open");  if ($('#dialogdiv').length == 0) {     $('body').append("<div id='dialogdiv'><div/>"); } var dialogdiv = $('#dialogdiv');  dialogdiv.attr("title", "please select chosen delivery service."); dialogdiv.html("<div id='deliverymethod'><div/>"); $('body').append("<div id='deliverymethod'><div/>");  dialogdiv.dialog({     modal : true,     buttons : [             {                 text : "process",                 class : 'large',                 click : function() {                     //                               }             },             {                 text : "cancel",                 class : 'large',                 click : function() {                     $(this).dialog('close');                 }             } ] }); } 

as can see, have tried append/show hidden div using:

dialogdiv.html("<div id='deliverymethod'><div/>"); $('body').append("<div id='deliverymethod'><div/>"); 

the buttons defined in jquery appear below div.

any appreciated.

thanks

try

function deliveryserviceclick() {     var dialogdiv = $('#dialogdiv');      $("#dialogdiv").dialog("open");      if (dialogdiv.length == 0) {         dialogdiv = $("<div id='dialogdiv'><div/>").appendto('body');         $('#deliverymethod').appendto(dialogdiv).removeclass('hide')         dialogdiv.attr("title", "please select chosen delivery service.");          dialogdiv.dialog({             modal : true,             buttons : [                 {                     text : "process",                     class : 'large',                     click : function() {                         //                                   }                 },                 {                     text : "cancel",                     class : 'large',                     click : function() {                         $(this).dialog('close');                     }                 } ]         });     }else{         dialogdiv.dialog("open");     } } 

demo: fiddle