在这种情况下如何将div附加到正确的位置

Question

我正在尝试动态创建以下HTML

http://jsfiddle.net/kgm9o693/18/

我是这样尝试的

http://jsfiddle.net/kgm9o693/19/

使用我正在生成的html，它就是以这种方式创建的

<div class="MyOrdersPage">
   <div class="customerNameDtl">
      <div class="customerNameDtl_left">
      MARK LITE
      </div>
      <div class="customerNameDtl_right">
         <p class="totalsection">Grand Total <span>₹ 530</span></p>
         <button class="btn btn-a">Confirm Order</button>
      </div>
      <div class="vendorNameDtsl">
         <h6>Vendor Name - TEST VENDOR</h6>
         <span>3 Items</span>
      </div>
   </div>
</div>

我面临的问题是div不应该是div customerNameDtl

的一部分

您能否告诉我如何正确附加div vendorNameDtsl。

Answer 1

您需要将vendorNameDtsl追加到.MyOrdersPage：

 vendorNameDtsl.append(vendorhtml);
 $(".MyOrdersPage").append(customerNameDtlmain);
 $(".MyOrdersPage").append(vendorNameDtsl);

Working Demo

Answer 2

用以下代码替换代码的结尾：

//customerNameDtlmain.append(vendorNameDtsl);
$(".MyOrdersPage").append(customerNameDtlmain).append(vendorNameDtsl);

Answer 3

$(".MyOrdersPage").append(customerNameDtlmain)

其他您必须通过trigger('create')

重新启动jQuery mobile

JSFiddle

工作JS：

var customerNameDtlmain = $('<div class="customerNameDtl"></div>'); 
var customerNameDtl_left = $('<div class="customerNameDtl_left"></div>'); 
customerNameDtl_left.append('MARK LITE');
customerNameDtlmain.append(customerNameDtl_left);
var customerNameDtl_right = $('<div class="customerNameDtl_right"></div>'); 
var html = '<p class="totalsection">Grand Total <span>&#x20B9; 530</span></p><button class="btn btn-a">Confirm Order</button>'
customerNameDtl_right.append(html);
customerNameDtlmain.append(customerNameDtl_right);
var vendorNameDtsl = $('<div class="vendorNameDtsl"></div>'); 
var vendorhtml = '<h6>Vendor Name - TEST VENDOR</h6><span>3 Items</span>';
vendorNameDtsl.append(vendorhtml);
customerNameDtlmain.append(vendorNameDtsl);
$(".MyOrdersPage").append(customerNameDtlmain).trigger('create');

Answer 4

请尝试一下它会起作用，

  $("<div/>",{class:"MyOrdersPage"}).appendTo('body');
     $("<div/>",{class:"customerNameDtl"}).appendTo(".MyOrdersPage");
    $("<div/>",{class:"vendorNameDtsl"}).appendTo(".MyOrdersPage");

    $("<div/>",{class:"customerNameDtl_left",text:"MARK LITE"}).appendTo(".customerNameDtl");

    $("<div/>",{class:"customerNameDtl_right"}).appendTo(".customerNameDtl");
var html1="<p class='totalsection'>Grand Total <span>₹ 530</span></p>"+
             "<button class='btn btn-a'>Confirm Order</button>";
    $(html1).appendTo(".customerNameDtl_right");
    var html2="<h6>Vendor Name - TEST VENDOR</h6>"+
             "<span>3 Items</span>"
    $(html2).appendTo(".vendorNameDtsl");