动态创建包含数据属性和HTML的元素，并插入现有元素

Question

我使用AJAX获取数据，需要动态创建列表。一开始我有：

<ul id="list">
</ul>

最后，我想要：

<ul id="list">
    <li data-city-numb="001">city-1<span>country-1</span></li>
    <li data-city-numb="002">city-2<span>country-2</span></li>
</ul>

现在我停止了这段代码(我知道这是错误的)：

for (var i = 0; i < numbOfCityList; i++) {
    $('<li/>', {
        text: myCityList.list[i].city + "<span>" + myCityList.list[i].county + "</span>"
    }).appendTo("#selected-list");
    $("#list").last().data(myCityList.list[i].numbid);
}; 

Answer 1

你不包括太多的信息，所以我列入了我自己版本的城市名单。

您可以这样做(尽管还有许多其他可能的方法)：

​

var myCityList = [{
  city: 1,
  county: 1
}, {
  city: 13,
  county: 7
}];

for (var i = 0; i < myCityList.length; i++) {
  $li = $('<li/>');
  $li.attr('data-city-numb', myCityList[i].city);
  $li.html(myCityList[i].city + ", <span>" + myCityList[i].county + "</span>");
  $('#list').append($li);

  // For one-line fans:
  // $('<li>').attr('data-city-numb', myCityList[i].city).html(myCityList[i].city + ", <span>" + myCityList[i].county + "</span>").appendTo('#list');
};

  // Or even, remove even the for(...) loop: 
  // $.map(myCityList,function(i, el) { $('<li>').attr('data-city-numb', el.city).html(el.city + ", <span>" + el.county + "</span>").appendTo('#list');});

  // I prefer the first version for readability

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id='list'></ul>

​

Answer 2

首先，当您的#selected-list拥有id="list"时，您将向id="list"附加一些内容。这就是为什么您的代码一开始就不能工作，因为<ul id="selected-list">不存在！

假设您的数据正确地通过(通过AJAX返回)，并且您使用的数组实际上充满了数据，那么您应该执行以下操作：

$('#list').append('<li data-city-numb="' + myCityList[i].city + '">' + myCityList[i].city + ', <span>' + myCityList[i].county + '</span></li>');

见工作示例：

​

var myCityList = [{
  city: 'Amsterdam',
  county: 'Netherlands'
}, {
  city: 'Rotterdam',
  county: 'Netherlands'
}];

for (var i = 0; i < myCityList.length; i++) {
  $('#list').append('<li data-city-numb="' + myCityList[i].city + '">' + myCityList[i].city + ', <span>' + myCityList[i].county + '</span></li>');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
</ul>

​