追加后清空<li>标签

Question

<li></li>创建标签后,此循环始终为空.为什么是这样？我该如何解决？

PS循环去了2次(我检查过).

function a(){
    for (var i = 0; i < list.length; i++) {
        $("#flist").append('<li id="file' + i '"<li/>');
        $("#flist").append('<li id="file' + i '_info"<li/>');
    }
}

HTML结果:

<ul id="flist" style="display: block;">
    <li id="file0">...</li>
    <li></li>
    <li id="file0_info"></li>
    <li></li>

    <li id="file1">...</li>
    <li></li>
    <li id="file1_info"></li>
    <li></li>
</ul>

Answer 1

这是因为你在>开头的li标签上错过了一个,它应该是</li>,而不是<li/>.

function a(){
    for (var i = 0; i < list.length; i++) {
        $("#flist").append('<li id="file' + i + '"></li>');
        $("#flist").append('<li id="file' + i + '_info"></li>');
    }
}

另请注意,生成单个HTML字符串并将其附加到DOM一次会更快:

function a() {
    var html = '';
    for (var i = 0; i < list.length; i++) {
        html += '<li id="file' + i + '"></li><li id="file' + i + '_info"></li>';
    }
    $('#flist').append(html);
}