jQuery - Cómo agregar elementos a la lista dinámicamente

This may have been asked a lot in SO but I'm unable to make it work. As the title says I need to append <ul> <li> dynamically inside one element. The method addUsers() is called everytime there is an update to json.

HTML:

<div id="users"></div>

JavaScript:

function addUsers() {
    var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    for (var i = 0; i < json.users.length; i++) {       
        users.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }
}

Excepted Output:

<div id="users">
<ul>
    <li><a href="#"><span class="user-list">User1</span></a></li>
    <li><a href="#"><span class="user-list">User2</span></a></li>
    <li><a href="#"><span class="user-list">User3</span></a></li>
</ul>

Salida real:

<div id="users">
    <ul></ul> //UL is ending here
        <li><a href="#"><span class="user-list">User1</span></a></li>
        <li><a href="#"><span class="user-list">User2</span></a></li>
        <li><a href="#"><span class="user-list">User3</span></a></li>
</div>

I must be doing something wrong. Appreciate any pointers. Thanks!

preguntado el 12 de febrero de 14 a las 08:02

You're appending everything to users, whereas what you want to do is append the li elementos a la ul, like Rajaprabhu Aravindasamy says. -

5 Respuestas

En realidad estás agregando el li elementos a la Div element. But in your context ul is present inside of that Div element. So you have to use .find() function to select that.

Tratar,

var xUl = users.find('ul');

for (var i = 0; i < json.users.length; i++) {       
        xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

Respondido 12 Feb 14, 08:02

function addUsers() {
    var users  = $('#users').empty(),
        ul     = $('<ul />');

    $.each(json.users, function(_, user) {
        var li = $('<li />'),
            a  = $('<a />',  {href : '#'}),
            sp = $('<span />', {'class' : 'user-list', text : user});

        ul.append( li.append( a.append(sp) ) );
    });
    users.append(ul);
}

Respondido 12 Feb 14, 08:02

prueba esto:

var temp = $('<ul> </ul>');
//LOOP
temp.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>')
//END LOOP
users.html(temp)

Respondido 12 Feb 14, 08:02

Not able to format my code snippet in comment section so adding it in Answer. First of all thanks @Rajaprabhu @adeneo and others for such quick rsponse.

Here is the modified code. Please let me know if that is correct.

var users = $('#users'); // div element
    users.html(''); // clears the div everytime it come inside addUsers() method
    users.append('<ul>');
    var xUl = users.find('ul');
    for (var i = 0; i < json.users.length; i++) {       
         xUl.append('<li><a href="#"><span class="user-list">'+json.users[i]+'</span></a></li>');
    }

Respondido 12 Feb 14, 08:02

(function () {

    var i = 0;
    var users_div = $('#users');
        users_div.html('');
        var child_ul = $('<ul></ul>').appendTo(users_div);

        for (i; i < 3; i += 1) {
            var child_li = $('<li></li>').appendTo(child_ul);
            var child_a = $('<a></a>').attr({
                href: '#'
            }).appendTo(child_li);
            var child_span = $('<span></span>').attr({
                class: 'userlist'
            });
            child_span.appendTo(child_a);
        }
    })();

Respondido 12 Feb 14, 09:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.