title: jQuery Append/Add Hidden div to jQuery Dialog
body: <p>I'm trying to append/add a div element within my HTML file to a dialog box (which currently has some buttons). The div is hidden on page load with a CSS class 'hide'</p>
  
  <p><strong>HTML DIV:</strong></p>
  
  <pre><code>&lt;section&gt;
              &lt;div id="deliveryMethod" title="Delivery Method" class="hide"&gt;
                  &lt;p&gt;Please select delivery method and special requirements.&lt;/p&gt;                    
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;label&gt;Method:&lt;/label&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div&gt;
                              &lt;select for="deliveryService"&gt;
                                  &lt;option value=""&gt;Please select...&lt;/option&gt;
                                  &lt;option value="FedEx"&gt;FedEx&lt;/option&gt;
                                  &lt;option value="UPS"&gt;UPS&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;label&gt;Special Requirements:&lt;/label&gt;                            
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;textarea id="specialRequirements" type="text" value=""  maxlength="220"&gt;&lt;/textarea&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS for class = hide</strong></p>
  
  <pre><code>.hide {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  </code></pre>
  
  <p><strong>jQuery when a buttion is clicked, below function i called:</strong></p>
  
  <pre><code>function deliveryServiceClick() {
  
  $("#dialogDiv").dialog("open");
  
  if ($('#dialogDiv').length == 0) {
      $('body').append("&lt;div id='dialogDiv'&gt;&lt;div/&gt;");
  }
  var dialogDiv = $('#dialogDiv');
  
  dialogDiv.attr("Title", "Please select your chosen delivery service.");
  dialogDiv.html("&lt;div id='deliveryMethod'&gt;&lt;div/&gt;");
  $('body').append("&lt;div id='deliveryMethod'&gt;&lt;div/&gt;");
  
  dialogDiv.dialog({
      modal : true,
      buttons : [
              {
                  text : "Process",
                  class : 'large',
                  click : function() {
                      //              
                  }
              },
              {
                  text : "Cancel",
                  class : 'large',
                  click : function() {
                      $(this).dialog('close');
                  }
              } ]
  });
  }
  </code></pre>
  
  <p>As you can see, i have tried to append/show my hidden div using:</p>
  
  <pre><code>dialogDiv.html("&lt;div id='deliveryMethod'&gt;&lt;div/&gt;");
  $('body').append("&lt;div id='deliveryMethod'&gt;&lt;div/&gt;");
  </code></pre>
  
  <p>The buttons defined in my jQuery would then appear below the div.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks</p>