JavaScript動態創建HTML部分

Question

嗨我想通過插入下拉列表名稱和刪除項目以編程方式創建特定div中的以下HTML部分。感謝您的任何幫助。

<ul class="nav"> 
     <li class="button-dropdown"> 
      <a href="javascript:void(0)" class="dropdown-toggle">Dropdown 1</a> 
      <ul class="dropdown-menu"> 
       <li> 
        <a href="#">Drop Item 1</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

簡單，我想創建1層或2的方法，它接受2串1的下拉列表和其他的丟棄物品

Answer 1

試試這個：

var str='<ul class="nav"><li class="button-dropdown">'; 
      str+= '<a href="javascript:void(0)" class="dropdown-toggle">Dropdown 1</a>'; 
      str+= '<ul class="dropdown-menu"><li><a href="#">Drop Item 1</a></li></ul></li></ul>'; 

$('#div-id').html(str); 

div-id是您的特定div ID。

Answer 2

爲@Nihar薩卡指出，但與這兩個字符串

function updateList(Dropdown1,DropItem1List){ 

    var ListOfItems = ''; 

    for(var i=0; i<DropItem1List.length;i++){ 
     ListOfItems += '<li><a href="#">'+DropItem1List[i]+'</a></li>'; 
    } 

    var htmlCode = '<ul class="nav">' 
      +'<li class="button-dropdown">' 
       +'<a href="javascript:void(0)" class="dropdown-toggle">'+Dropdown1+'</a>' 
       +'<ul class="dropdown-menu">' 
        +ListOfItems 
      +'</ul>' 
     +'</li>' 
    +'</ul>'; 

    $('#yourDivId').html(htmlCode); 

} 

或功能如果HTML已經存在於你的頁面

$('#yourDivId .nav .button-dropdown a.dropdown-toggle').text(Dropdown1); 
$('#yourDivId .nav .button-dropdown ul.dropdown-menu').text(DropItem1);