Come posso creare dinamicamente un elenco non ordinato in JavaScript?

Question

Ho un array JavaScript globale che contiene alcune stringhe.

Desidero creare un elenco dinamico basato sulle stringhe nel mio array JavaScript. Simile a questo:

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

Come posso iterare il mio allineamento, e quindi creare questa lista in JavaScript/jQuery?

Answer 1

Prova questa

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

Non ho provato questo - appena fuori dalla mia testa. Spero che questo ti aiuti!

Answer 3

Sì, è possibile. È possibile all'utente la DOM direttamente con createElement (vedi risposta di Jonathan), o andare un percorso molto facile con jQuery (non testato):

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

Se avete solo bisogno di una matrice piatta (cioè non multi-dimensionale e non array all'interno della matrice), allora si può fare quanto segue in pianura 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); 
} 

quindi aggiungere list a qualsiasi elemento padre nel corpo che desiderate.