如何使用 jQuery append() 组合 <ul>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1126055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I assemble a <ul> using jQuery append()?
提问by Brian Liang
I'm trying to use the append function and encountered this:
我正在尝试使用 append 函数并遇到了这个：
$("#details").append('<ul>');
for (var i = 0; i < 10; i++) {
$("#details").append('<li>something</li>');
}
$("#details").append('</ul>');
It appears that the <li>elements renders OUTSIDE the <ul>tag.
<li>元素似乎呈现在<ul>标签之外。
Is this a jQuery bug?
这是一个jQuery错误吗？
回答by Blixt
Nope, you can't use it like that. appendis an atomic operation, which creates the element directly.
不，你不能那样使用它。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>');
}
Alternatively, generate the HTML and add it all at once (this will be more similar to your original code):
或者，生成 HTML 并一次性添加所有内容（这将更类似于您的原始代码）：
var html = '<ul>';
for (var i = 0; i < 10; i++) {
html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);
This code is noticeably faster when dealing with many elements.
处理许多元素时，此代码明显更快。
If you need a reference to the list, just do the following instead of $('#details').append(html);:
如果您需要对列表的引用，只需执行以下操作而不是$('#details').append(html);：
var list = $(html).appendTo('#details');
回答by chaos
No, it's a programmer bug. <li>s are attached to their <ul>or <ol>, not to its container. And appending a close tag is nonsensical.
不，这是一个程序员的错误。 <li>s 附加到它们的<ul>or <ol>，而不是它的容器。并附加一个关闭标签是荒谬的。
You're basically working as if what you were appending were raw HTML, and it's not; you're actually working with the DOM.
你基本上就像你附加的是原始 HTML 一样工作，但事实并非如此；您实际上是在使用 DOM。
Try this:
尝试这个：
var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
list.append('<li>something</li>');
Note:please see (and upvote) Blixt's answer, which expands on a couple different options that are superior for various purposes. It deserves attention and hasn't been getting it.
注意：请参阅（并投票）Blixt 的答案，它扩展了几个不同的选项，这些选项对于各种用途都是优越的。它值得关注，但没有得到它。
回答by Russ Cam
I think there's a problem in your loop
我认为你的循环有问题
for (var i = - i < 10; i++)
$("#details").append('<li>something</li>');
should be I think
应该是我认为
for (var i = 0; i < 10; i++)
$("#details ul").append('<li>something</li>');
and lose the following from the end
并从最后失去以下内容
$("#details").append('</ul>');
EDIT:
编辑：
Based on George IV's comment, in order to avoid appending <li>elements to any <ul>that may be a child of the element with id "details", simply give the <ul>element an id when you append it-
根据乔治四世的评论，为了避免将<li>元素附加到任何<ul>可能是具有 id“ details”元素的子元素的元素，只需在附加元素时为其提供<ul>一个 id-
$("#details").append('<ul id="appended">');
for (var i = 0; i < 10; i++)
$("#appended").append('<li>something</li>');
you may also find this article interesting - 43,439 reasons to use append() correctly
您可能还会发现这篇文章很有趣 -正确使用 append() 的 43,439 个理由
回答by spoulson
For a small static list, I prefer to unroll into a single expression.
对于一个小的静态列表，我更喜欢展开成单个表达式。
$('#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>')
);
回答by adardesign
I would use something like if you have the data in an Array.
如果你有一个数组中的数据，我会使用类似的东西。
var appendToUl = array.join("
var appendToUl = array.join("
It is much faster
它要快得多
