如何在现有的<ul>中添加<li>？

Question

我的代码看起来像这样:

<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什么？

Answer 1

这样做:

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

两件事情:

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

Answer 2

您也可以采用更多"对象方式"并且仍然易于阅读:

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

你不必再与引号斗争,但必须保持一丝大括号:)

Answer 3

如何使用"after"而不是"append".

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

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

Answer 4

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

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

Answer 5

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>

Answer 6

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

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

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

Answer 7

代替

$("#header ul li:last")

尝试

$("#header ul")

Answer 8

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

Answer 9

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

快乐编码:)

Answer 10

使用：

// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");