Question

我正在尝试创建以下HTML，如此小提琴

所示

<div data-role="panel" id="rightpanel" data-position="right" data-display="reveal" data-theme="b">
   <div class="tpMenuWrap">
      <a href="#demo-links" data-rel="close" class="icon-cancel-circled-1 panelCloseBtn"></a>
      <ul class="ul_menu">
         <li><a>My Recent Order</a></li>
      </ul>
      <div class="recentOrderslistWrap">
         <a href="#"><b>16/4/2015:</b> Vendor Name</a>
         <a href="#"><b>16/4/2015:</b> Vendor Name</a>
         <a href="#"><b>16/4/2015:</b> Vendor Name</a>
      </div>
   </div>
   <div class="btMenuWrap">
      <ul class="ul_menu">
         <li><a>Contact Us</a></li>
         <li><a>Sign out</a></li>
      </ul>
   </div>
</div>

我已尝试过如此小提琴中所示的跟随，但没有显示任何内容

http://jsfiddle.net/kgm9o693/56/

$(document).on('click', '.rightpanelclass', function (e) {

    var rightpanelmaindiv = $('<div data-role="panel" id="rightpanel" data-position="right" data-display="reveal" data-theme="b">');

    var tpMenuWrap = $('   <div class="tpMenuWrap">');

    var html = '<a href="#demo-links" data-rel="close" class="icon-cancel-circled-1 panelCloseBtn"></a>';

    html += '<ul class="ul_menu">\
           <li><a>My Recent Order</a></li>\
             </ul>';

    tpMenuWrap.append(html);
    rightpanelmaindiv.append(tpMenuWrap);



    var recentOrderslistWrap = $('<div class="recentOrderslistWrap"></div>');

    var recentorders = '<a href="#"><b>16/4/2015:</b> Vendor Name</a>';

    recentorders += '<a href="#"><b>16/4/2015:</b> Vendor Name</a>';

    recentOrderslistWrap.append(recentorders);


    tpMenuWrap.append(recentOrderslistWrap);

    var btMenuWrap = $('<div class="btMenuWrap"></div>');

    var detailshtml = '<ul class="ul_menu">';

    detailshtml += '<li><a>Contact Us</a></li>';
    detailshtml += ' <li><a>Sign out</a></li>';
    detailshtml += '</ul>';

    btMenuWrap.append(detailshtml);

    rightpanelmaindiv.append(btMenuWrap);


    $("#rightpanel").html(rightpanelmaindiv);


    $("#rightpanel").trigger("create");




});

能告诉我如何解决这个问题。

Answer 1

在你的小提琴中，你有两个id =＆＃34;右面板＆＃34;的div。

暂时删除静态（在html框中），并更改最后一行：

$("#rightpanel").html(rightpanelmaindiv);

要..

$("body").html(rightpanelmaindiv);

显然你可以使用wrapper-div，但这取决于你。

如何通过javascript动态创建以下HTML

1 个答案: