如何在JavaScript中動態創建無序列表？

Question

我有一個包含一些字符串的全局JavaScript數組。

我想根據JavaScript數組中的字符串創建動態列表。與此相似：

<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'> 
    <li> 
     <a href='#'>String 1</a> 
    </li> 
</ul> 

我如何可以遍歷我的數組，然後創建這個列表在JavaScript/jQuery的？

Answer 1

試試這個

var str = '<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>'; 

for(var i in $yourArray){ 
    str += '<li><a href="#">String 1</a></li>'; 
} 

str += '</ul>'; 

$('body').append(str); 

Answer 2

var $bread = $('ul.xbreadcrumbs'); 
$.each(yourArray, function(index, value) { 
    $('<li><a href="#">' + value + '</a></li>') 
    .appendTo($bread); 
}); 

我還沒有測試過這個 - 就在我的頭上。希望這可以幫助！

Answer 3

是的，你可以。您可以用戶的DOM直接與createElement（見喬納森的回答），或者去使用jQuery（未測試）一個非常簡單的方法：

var ul = "<ul>"; 
for(var i=0; i < arr.length; i++) { 
    ul += "<li><a href=\"#\">" + arr[i] + "</a></li>"; 
} 
ul += "</ul>"; 

var ulElem = $(ul); 

Answer 4

如果你只需要一臺陣列（即不多維和無陣列）內的數組，則可以執行下列操作中普通的JavaScript：

var strs = [ "String 1", "String 2", "String 3" ]; 
var list = document.createElement("ul"); 
for (var i in strs) { 
    var anchor = document.createElement("a"); 
    anchor.href = "#"; 
    anchor.innerText = strs[i]; 

    var elem = document.createElement("li"); 
    elem.appendChild(anchor); 
    list.appendChild(elem); 
} 

然後追加list在你想要的身體取其父元素。