jQuery 如何将列表项添加到现有的无序列表？

How to add a list item to an existing unordered list?

提问by Eileen

I have code that looks like this:

我有如下代码：

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

I'd like to use jQuery to add the following to the list:

我想使用 jQuery 将以下内容添加到列表中：

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

I tried this:

我试过这个：

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

But that adds the new liinsidethe last li(just before the closing tag), not after it. What's the best way to add this li?

但是，增加了新的li内最后一次li，以后不是（在结束标记之前）。添加此内容的最佳方法是li什么？

回答by Paolo Bergantino

This would do it:

这样做：

$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Two things:

两件事情：

• You can just append the <li>to the <ul>itself.
• You need to use the opposite type of quotes than what you're using in your HTML. So since you're using double quotes in your attributes, surround the code with single quotes.

• 您可以将 附加<li>到它<ul>本身。
• 您需要使用与 HTML 中使用的引号类型相反的引号。因此，由于您在属性中使用双引号，请用单引号将代码括起来。

回答by Danubian Sailor

You can do it also in more 'object way' and still easy-to-read:

你也可以用更多的“对象方式”来做，而且仍然易于阅读：

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

You don't have to fight with quotes then, but must keep trace of braces :)

那么你不必与引号作斗争，但必须保留大括号的痕迹:)

回答by satomacoto

How about using "after" instead of "append".

如何使用“after”而不是“append”。

$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

".after()" can insert content, specified by the parameter, after each element in the set of matched elements.

“.after()”可以在匹配元素集中的每个元素之后插入由参数指定的内容。

回答by kravits88

If you are simply adding text in that li, you can use:

如果您只是在其中添加文本li，则可以使用：

 $("#ul").append($("<li>").text("Some Text."));

回答by Ole Haugset

jQuery comes with the following options which could fulfil your need in this case:

jQuery 带有以下选项，可以满足您在这种情况下的需求：

appendis used to add an element at the end of the parent divspecified in the selector:

append用于div在选择器中指定的父元素的末尾添加一个元素：

$('ul.tabs').append('<li>An element</li>');

prependis used to add an element at the top/start of the parent divspecified in the selector:

prepend用于div在选择器中指定的父元素的顶部/开始添加一个元素：

$('ul.tabs').prepend('<li>An element</li>');

insertAfterlets you insert an element of your selection next after an element you specify. Your created element will then be put in the DOM after the specified selector closing tag:

insertAfter允许您在指定的元素之后插入您选择的元素。您创建的元素将在指定的选择器结束标记之后放入 DOM：

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBeforewill do the opposite of the above:

insertBefore将做与上述相反的事情：

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

回答by Philippe Leybaert

You should append to the container, not the last element:

您应该附加到容器，而不是最后一个元素：

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

The append()function should've probably been called add()in jQuery because it sometimes confuses people. You would think it appends something after the given element, while it actually addsit to the element.

该追加（）函数应该可能已经被调用的add（）jQuery中，因为它有时混淆人民。你会认为它在给定元素之后附加了一些东西，而它实际上是将它添加到元素中。

回答by Adrian Godong

Instead of

代替

$("#header ul li:last")

try

尝试

$("#header ul")

回答by Evan Meagher

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

回答by undeniablyrob

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Here is some feedback regarding Code Readability (shameless plug for a blog). http://coderob.wordpress.com/2012/02/02/code-readability

这里是一些关于代码可读性的反馈（博客的无耻插件）。 http://coderob.wordpress.com/2012/02/02/code-readability

Consider separating the declaration of your new elements from the action of adding them to your UL.. It would look something like this:

考虑将新元素的声明与将它们添加到 UL 的操作分开。它看起来像这样：

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

Happy coding :)

快乐编码:)

回答by user3516328

This is the shortest way you can do that

这是您可以做到的最短方法

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

Where blocks in an array. and you need to loop through the array.

数组中的块。并且您需要遍历数组。