javascript - 动态添加li和div到html页面

Question

我有一个列表，我使用 ajax 调用动态添加到 html 页面。我正在添加这样的列表项:

Jquery 中的代码:

$.getJSON('getData.php', function(result){
    $.each(result,  function(index, results) {

        $('#myList').append('<li>'+results.title+'</li>');
    });

});

我想要做的是动态添加一个div来添加li列表。因此，每次添加列表项时，它们都会添加到 div 中。

期望的输出是这样的:

<div>
  <li>First Added item</li>
  <li>Second Added item</li>
  <li>Third added itme</li>
</div>

这是我尝试的解决方案:

  $.getJSON('getChapterFilter.php', {name: bookSel}, function(result){

    var appendDiv = false;
    var appendEnd = false;
    $.each(result,  function(index, results) {

        if (appendDiv === false) {
            $('#myList').append('<div>');
            appendDiv = true;
            }
        else {

        $('#myList').append('<li>'+results.title+'</li>');
        }

        if(appendEnd === false) {
            $('#myList').append('</div>');
            appendEnd = true;
            }
     });

  });

我遇到的问题是 li 没有填充在列表中。这就是上面代码所发生的情况:

<div></div>
<li>first added item</li>
<li>second added item</li>
<li>third added item</li>

Answer 1

$('#myList').append('<div>');

这将附加 <div></div>至#myList

添加您的 <li>在 div 内你必须执行以下操作:

$('#myList > div').append('<li>'+results.title+'</li>');

要缩短它，您可以这样做:

$.getJSON('getChapterFilter.php', {name: bookSel}, function(result){
    $("#myList").append("<div>" + result.reduce( function(p,c){ return p + "<li>" + c.title + "</li>" }, "" ) + "</div>" );
});