¿Cómo puedo crear dinámicamente una lista desordenada en JavaScript?

Question

Tengo una matriz de JavaScript global que contiene algunas cadenas.

Quiero crear una lista dinámica basada en las cadenas en mi matriz de JavaScript. Similar a esto:

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

¿Cómo puedo iterar sobre mi matriz, y luego crear esta lista en JavaScript/jQuery?

Answer 1

probar este

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

No he probado esto, solo fuera de mi cabeza. ¡Espero que esto ayude!

Answer 3

Sí, puedes. Puede usuario del DOM directamente con createElement (véase la respuesta de Jonathan), o ir a una ruta muy fácil con jQuery (no probado):

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

Si sólo necesita una matriz plana (es decir, no multidimensional y sin matrices dentro de la matriz), a continuación, puede hacer lo siguiente en la llanura de 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); 
} 

continuación, anexar list a cualquier elemento padre en el cuerpo que usted desea.