如何使用jQuery append()组装<ul>？

Question

我正在尝试使用append函数并遇到这个:

$("#details").append('<ul>');
for (var i = 0; i < 10; i++) {
    $("#details").append('<li>something</li>');
}
$("#details").append('</ul>');

看来<li>元素渲染OUTSIDE <ul>标签.

这是一个jQuery错误吗？

Answer 1

不,你不能那样用它.append是一个原子操作,它直接创建元素.

// The <ul> element is added to #details, then it is selected and the jQuery
// selection is put in the "list" variable.
var list = $('<ul/>').appendTo('#details');
for (var i = 0; i < 10; i++) {
    // New <li> elements are created here and added to the <ul> element.
    list.append('<li>something</li>');
}

或者,生成HTML并将其全部添加(这将与原始代码更相似):

var html = '<ul>';
for (var i = 0; i < 10; i++) {
    html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);

处理许多元素时,此代码明显更快.

如果您需要对列表的引用,请执行以下操作,而不是$('#details').append(html);:

var list = $(html).appendTo('#details');

Answer 2

不,这是程序员的错误. <li>s附在他们的<ul>或者<ol>不是它的容器上.并附上一个密切的标签是荒谬的.

你基本上工作就好像你追加的是原始HTML,而不是; 你实际上是在使用DOM.

试试这个:

var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
    list.append('<li>something</li>');

注意:请参阅(和upvote)Blixt的答案,该答案扩展了几个不同的选项,这些选项优于各种用途.它值得关注,并没有得到它.

Answer 3

我认为你的循环中存在问题

for (var i = - i < 10; i++)
    $("#details").append('<li>something</li>');

应该是我想的

for (var i = 0; i < 10; i++)
    $("#details ul").append('<li>something</li>');

从最后丢失以下内容

$("#details").append('</ul>');

工作演示

编辑:

根据George IV的评论,为了避免将<li>元素附加到任何<ul>可能是id为" details " 的元素的子元素,只需<ul>在追加它时给元素一个id-

$("#details").append('<ul id="appended">');

for (var i = 0; i < 10; i++)
    $("#appended").append('<li>something</li>');

你也可能会发现这篇文章很有趣 - 正确地使用append()的原因是43,439