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 e 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>

Actual Output:

<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!

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 e 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>

Actual Output:

<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!

• javascript
• jquery

• You're appending everything to users, whereas what you want to do is append the li elements to the ul, like Rajaprabhu Aravindasamy says. – roobeedeedada Commented Feb 12, 2014 at 8:20

5 Answers 5

You are actually appending the li elements to the Div element. But in your context ul is present inside of that Div element. So you have to use .find() function to select that.

Try,

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

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

try this:

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)

Not able to format my code snippet in ment 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 e 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>');
    }

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