javascript - jQuery追加/非表示のdivをjQueryダイアログに追加

Question

HTML ファイル内の div 要素をダイアログ ボックス (現在いくつかのボタンがあります) に追加/追加しようとしています。CSSクラス「hide」を使用して、ページの読み込み時にdivが非表示になります

HTML 部:

<section>
            <div id="deliveryMethod" title="Delivery Method" class="hide">
                <p>Please select delivery method and 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 = hide

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

ボタンがクリックされたときのjQuery、私が呼び出した関数の下：

function deliveryServiceClick() {

$("#dialogDiv").dialog("open");

if ($('#dialogDiv').length == 0) {
    $('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');

dialogDiv.attr("Title", "Please select your 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');
                }
            } ]
});
}

ご覧のとおり、次を使用して非表示のdivを追加/表示しようとしました:

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

私のjQueryで定義されたボタンは、divの下に表示されます。

どんな助けでも大歓迎です。

ありがとう