我有这样的代码:
<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的最好方法是什么?
当前回答
你也可以用一种更“客观”、更容易读懂的方式来表达:
$('#content ul').append(
$('<li>').append(
$('<a>').attr('href','/user/messages').append(
$('<span>').attr('class', 'tab').append("Message center")
)));
你不必与引号斗争，但你必须跟踪大括号:)
其他回答
这样可以做到:
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
两件事:
您可以将<li>附加到<ul>本身。 您需要使用与您在HTML中使用的相反类型的引号。因此，由于您在属性中使用双引号，所以代码周围应使用单引号。
而不是
$("#header ul li:last")
try
$("#header ul")
这是另一个
$("#header ul li").last().html('<li> Menu 5 </li>');
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);
使用jquery的prepend()函数在ul中添加li作为第一项
$("ul").prepend("<li>first item</li>");
使用jquery的append()函数在ul中添加li作为最后一项
$("ul").append("<li>last item</li>");
