Cómo agregar elementos a una lista desordenada usando jquery

Solución:

La forma más eficiente es crear una matriz y agregarla al dom una vez.

Puede hacerlo mejor aún perdiendo toda la cadena concat de la cadena. Empuje varias veces a la matriz o cree la cadena usando + = y luego presione, pero se vuelve un poco más difícil de leer para algunos.

También puede envolver todos los elementos en un elemento principal (en este caso, ul) y agregarlo al contenedor para obtener el mejor rendimiento. Solo presiona el ‘<ul>' y '</ul>' antes y después de cada uno y anexarlo a un div.

data = [
{
  "userId": 1,
  "Username": "User_1"
},
{
  "userId": 2,
  "Username": "User_2"
}
];

var items = [];

$.each(data, function(i, item) {

  items.push('<li><a href="https://foroayuda.es/yourlink?id=" + item.UserID + '">' + item.Username + '</a></li>');

}); // close each()

$('#yourUl').append(items.join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="yourUl">
</ul>

Decidí tomar la excelente respuesta de redsquare y mejorarla un poco. En lugar de agregar HTML, prefiero agregar objetos jQuery. De esa manera, no tengo que preocuparme por escapar de HTML y otras cosas.

En este ejemplo, data contiene una matriz de objetos, analizados a partir de JSON. Cada objeto de la matriz tiene un .title propiedad. Yo uso jQuery’s each función para recorrerlos.

var items=[];
$(data).each(function(index, Element) {
    items.push($('<li/>').text(Element.title));
});
$('#my_list').append.apply($('#my_list'), items);

Empujo un nuevo objeto jQuery en la matriz de elementos, pero con el método de encadenamiento puedo establecer propiedades antes de tiempo, como .text.

Luego agrego la matriz de objetos a la lista <ul id="my_list"> utilizando el método de Lars Gersmann.

Consigue el <ul> usando la sintaxis del selector de jQuery y luego llamar append:

$("ul#theList").append("<li><a href="https://foroayuda.es/url-here">Link Text</a></li>");

Consulte los documentos de jQuery para obtener más información.

---

---

Utiliza Nuestro Buscador