jquery-append - jquery如何在已存在的<ul> 添加<li>?

  显示原文与译文双语对照的内容

我的代码如下所示:


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

时间:

这样做可以:


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

两件事:

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

你还可以在更多'对象方式'和easy-to-read中进行:


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

你不必与引号搏斗,但必须保持大括号的跟踪:)

使用"之后"而不是"附加"。


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

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

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


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

可能的append() 函数应该被称为 add() jquery,因为它有时让人迷惑。 后你会觉得它附加一些给定的元素,而它实际上添加元素。

jQuery附带以下选项,可以满足你在本例中的需求:

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


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

在选择器中指定的父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>').insertAfter('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

...