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

我有这样的代码:

<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的最佳方式是什么?

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

这样可以做到:

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

两件事:

  • 您可以将<li>附加到<ul>本身。
  • 您需要使用与您在HTML中使用的相反类型的引号。因此,由于您在属性中使用双引号,所以代码周围应使用单引号。

你应该添加到容器中,而不是最后一个元素:

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

append ()函数在jQuery中应该被称为add (),因为它有时会让人感到困惑。您可能会认为它在给定元素后附加了一些东西,而实际上它是增加了到元素。

而不是

$("#header ul li:last")

试一试

$("#header ul")

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

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

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

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

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

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

使用:

$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
这是关于代码的可读性的一些反馈(无耻的博客)。 # EYZ0 < / p >

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

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

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

这是另一个

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

使用:

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

这是你能做到的最短的方法:

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

其中blocks是一个数组。你需要对数组进行循环。

只是添加到这个线程-如果你是移动一个现有的项目,你将需要使用clone,然后true/false是否克隆/深度克隆事件以及(https://api.jquery.com/clone/)。

< p >的例子: # EYZ0 < / p >

使用jquery预先考虑()函数在ul中添加li作为第一项

$("ul").prepend("<li>first item</li>");

使用jqueryappend ()函数在ul中添加li作为最后一项

$("ul").append("<li>last item</li>");