如何動態地通過JavaScript

我試圖創建下面的HTML創建下列HTML如本小提琴如何動態地通過JavaScript

<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>

如本撥弄我已經爲followng嘗試過，但沒有正在顯示

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"); 




});

請讓我知道如何解決這個問題。

來源

2015-03-13 Kiran

它的靜態HTML，你不能創建一個帶有上述HTML的隱藏div，並在以後使用它 – Satpal 2015-03-13 07:59:36

這整個事情可以放在一起作爲一個HTML字符串，把它變成一個DOM對象，並插入它。我看不出有什麼理由要創建DOM hieararchy的小塊，並試圖將它們粘合在一起然後插入它。只需製作一個大的HTML字符串，將其設置爲容器對象的'.innerHTML'並完成。 – jfriend00 2015-03-13 08:03:02

http://jsbin.com/bisivemivu/1/#rightpanel。檢查你的代碼工作正常！ – 2015-03-13 08:06:56

在你的小提琴中，你有兩個id =「rightpanel」的div。

刪除靜態的現在（在html盒），改變它的最後幾行之一來自：

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

到..

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

顯然，你可以使用一個包裝相反，但這取決於你。

來源

2015-03-13 08:34:07 Mackan

如何動態地通過JavaScript

回答

相關問題