我有这样的代码:
<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的最好方法是什么?
当前回答
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>
其他回答
你应该添加到容器中，而不是最后一个元素:
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
在jQuery中，append()函数可能应该被称为add()，因为它有时会让人感到困惑。您可能会认为它在给定元素之后追加了一些内容，而实际上它将它添加到元素中。
你也可以用一种更“客观”、更容易读懂的方式来表达:
$('#content ul').append(
$('<li>').append(
$('<a>').attr('href','/user/messages').append(
$('<span>').attr('class', 'tab').append("Message center")
)));
你不必与引号斗争，但你必须跟踪大括号:)
Use:
// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");
用“after”代替“append”怎么样?
$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
".after()"可以在匹配元素集的每个元素之后插入由参数指定的内容。
这样可以做到:
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
两件事:
您可以将<li>附加到<ul>本身。 您需要使用与您在HTML中使用的相反类型的引号。因此，由于您在属性中使用双引号，所以代码周围应使用单引号。
