我有这样的代码:

<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>

我想使用jQuery添加以下到列表:

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

我试了一下:

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

但是这会在最后一个li中(就在结束标记之前)添加新的li,而不是在最后一个li之后。加上这个li的最好方法是什么?


当前回答

如果你只是在li中添加文本,你可以使用:

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

其他回答

你也可以用一种更“客观”、更容易读懂的方式来表达:

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

你不必与引号斗争,但你必须跟踪大括号:)

这是另一个

$("#header ul li").last().html('<li> Menu 5 </li>');

jQuery提供了以下选项,可以满足您在这种情况下的需求:

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

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

Prepend用于在选择器中指定的父div的顶部/开头添加一个元素:

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

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>

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>

用“after”代替“append”怎么样?

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

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

Use:

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

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

考虑将新元素的声明与将它们添加到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);