我有这样的代码:
<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的最好方法是什么?
当前回答
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);
其他回答
如果你只是在li中添加文本，你可以使用:
$("#ul").append($("<li>").text("Some Text."));
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提供了以下选项，可以满足您在这种情况下的需求:
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>
只是添加到这个线程-如果你正在移动一个现有的项目，你将需要使用克隆，然后true/false是否克隆/深度克隆事件以及(https://api.jquery.com/clone/)。
例子: $(" #内容ul) .append ($ (' .existing_li ') .clone(真));
而不是
$("#header ul li:last")
try
$("#header ul")
