如何使用jquery追加列表答案

【问题标题】：how to append the list using jquery如何使用jquery追加列表
【发布时间】：2018-02-05 11:49:27
【问题描述】：

基本上，我尝试使用 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>");


    }

“data”这里是一个 JSON 数组，我从 REST 获得，具有 key 和 name 属性。但是，使用这个，我得到了这样的输出unwanted result。元素与列表点不在同一行。我希望文本与列表点在同一行。有什么帮助吗？？

【问题讨论】：

标签： javascript jquery list web append

【解决方案1】：

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

【讨论】：

请edit 详细说明您的答案。代码只为未来的访问者提供难以理解的答案。

【解决方案2】：

您不能附加部分元素，例如打开和关闭 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有很多索引，你应该在循环外追加，一次追加所有元素

【讨论】：

最佳答案 imo 因为使用参数对象一步创建链接

【解决方案3】：

您不需要像现在这样附加开始和结束标记，只需将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);


}

【讨论】：

【解决方案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')
    }
});

【讨论】：