我的代码看起来像这样:
<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
的最佳方法是什么?
#1楼
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
#2楼
这样做:
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
两件事情:
- 您只需将
<li>
附加到<ul>
本身即可。 - 您需要使用与您在HTML中使用的相反类型的引号。 因此,由于您在属性中使用双引号,请使用单引号括起代码。
#3楼
您应该附加到容器,而不是最后一个元素:
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
append()函数应该在jQuery中被称为add() ,因为它有时会让人感到困惑。 你会认为它在给定元素之后附加了一些东西,而它实际上将它添加到元素中。
#4楼
代替
$("#header ul li:last")
尝试
$("#header ul")
#5楼
如果您只是在该li
添加文本,则可以使用:
$("#ul").append($("<li>").text("Some Text."));
#6楼
这是另一个
$("#header ul li").last().html('<li> Menu 5 </li>');
#7楼
jQuery带有以下选项,可满足您在这种情况下的需求:
append
用于在选择器中指定的父div
的末尾添加元素:
$('ul.tabs').append('<li>An element</li>');
prepend
用于在选择器中指定的父div
的top / start处添加元素:
$('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>
#8楼
简单
// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
#9楼
这是您可以做到的最短路
list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);
数组中的块。 你需要循环遍历数组。
#10楼
您也可以采用更多“对象方式”并且仍然易于阅读:
$('#content ul').append(
$('<li>').append(
$('<a>').attr('href','/user/messages').append(
$('<span>').attr('class', 'tab').append("Message center")
)));
你不必再与引号斗争,但必须保持一丝大括号:)
#11楼
如何使用“after”而不是“append”。
$("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
“.after()”可以在匹配元素集中的每个元素之后插入由参数指定的内容。
#12楼
$("#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);
快乐编码:)