jQuery - Как добавить элемент списка динамически

Question

Возможно, это было много спрошено в SO, но я не могу заставить его работать. Как говорится в названии, мне нужно добавить <ul> <li> динамически внутри одного элемента. Метод addUsers() вызывается каждый раз, когда есть обновление для 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>'); 
    } 
} 

Освобожденные Выход:

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

Фактический выход:

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

я должен делать что-то неправильно. Цените любые указатели. Благодаря!

Answer 1

Вы фактически добавляете элементы li к элементу Div. Но в вашем контексте ul присутствует внутри этого элемента Div. Поэтому вы должны использовать функцию .find(), чтобы выбрать ее.

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

Answer 2

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

Answer 3

попробовать это:

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) 

Answer 4

не в состоянии отформатировать фрагмент кода в комментарий раздел так что добавление его в ответ. Прежде всего спасибо @Rajaprabhu @adeneo и другим за такой быстрый ответ.

Это модифицированный код. Пожалуйста, дайте мне знать, если это правильно.

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

Answer 5

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