jquery - 如何使用 jQuery append() 组装 ？

Question

我尝试使用追加功能并遇到了这个:

$("#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');