如何使用jquery附加列表

Question

基本上，我尝试使用jquery附加列表。此列表中的每个元素都连接到不同的链接。这就是我所做的

for (i=0; i <data.length ; i++){ 

     var a = $('<a />'); 
     a.attr('href','https://example.com/browse/' + data[i].key); 
     a.text(data[i].name); 


     $("#list-of-project ul").append("<li>").append(a).append("</li>"); 


    } 

“数据”这里是一个JSON数组，我从REST获得键和名称属性。 但是，使用这个，我得到这样的输出unwanted result。该元素与列表点不在同一行。 我希望文本与列表点位于同一行。任何帮助？

Answer 1

您不能追加部分元素，例如打开和关闭LI标签。
创建LI元素，再追加锚，然后将其追加到UL

for (i=0; i <data.length ; i++){ 

    var a = $('<a />', { 
     href : 'https://example.com/browse/' + data[i].key, 
     text : data[i].name 
    }); 

    var li = $('<li />'); 

    $("#list-of-project ul").append(li.append(a)); 
} 

注意，如果data有很多指标，你应该做的外循环的添加，而添加的所有元素在一次

Answer 2

你并不需要附加的开启和关闭标签就像你正在做的，简单的追加a到li，然后追加li到ul ...

for (i=0; i <data.length ; i++) { 
    var a = $('<a />'); 
    a.attr('href','https://example.com/browse/' + data[i].key); 
    a.text(data[i].name); 

    var li = $('<li/>'); 
    li.append(a); 

    $('#list-of-project ul').append(li); 


} 

Answer 3

for (i=0; i <data.length ; i++){ 

    var a = $('<a />'); 
    a.attr('href','https://example.com/browse/' + data[i].key); 
    a.text(data[i].name); 
    var li ="<li>"+a+"</li>" 
    $("#list-of-project ul").append(li); 
} 

Answer 4

<input type="test" id="inputName" /> 
<button id="btnName">Click me!</button> 

<ul class="justList"></ul> 

$('#btnName').click(function(){ 
    var text = $('#inputName').val(); 
    if(text.length){ 
     $('<li />', {html: text}).appendTo('ul.justList') 
    } 
});