JavaScript動態創建HTML部分

Question

嗨，我試圖通過插入下拉列表名稱和Drop Item在特定的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個用於Dropdown，另一個用於Drop Item

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 Sarkar所指出的，但具有兩個字符串的功能

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