Question

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

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

<li>元素似乎在<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>已附加到<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>');

Working Demo

修改

根据George IV的评论，为了避免将<li>个元素附加到任何可能是ID为“详细信息”的元素的子级<ul>，请简单地给出<ul>元素在您追加时的ID -

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

您可能还会发现这篇文章很有趣 - 43,439 reasons to use append() correctly

Answer 4

对于一个小的静态列表，我更愿意展开一个表达式。

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

Answer 5

如果您在数组中有数据，我会使用类似的东西。

var appendToUl = array.join（“

+ array +

”）;

速度快得多

如何使用jQuery append（）？</ul>组装<ul>

5 个答案: