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的最好方法是什么？
这将做到这一点：
$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
两件事情：
- 您可以将
<li>追加到<ul>本身。 - 您需要使用与您在HTML中使用相反types的引号。 所以既然你在你的属性中使用双引号，用单引号括起代码。
你也可以用更多的“对象方式”来完成，而且仍然容易阅读：
$('#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>');
“.after（）”可以将参数指定的内容插入匹配元素集中的每个元素之后。
如果你只是在里面添加文字，你可以使用：
$("#ul").append($("<li>").text("Some Text."));
在这种情况下，jQuery带有以下选项可以满足您的需求：
append用于在select器中指定的父div的末尾添加一个元素：
$('ul.tabs').append('<li>An element</li>');
prepend用于在select器中指定的父div的顶部/开始处添加一个元素：
$('ul.tabs').prepend('<li>An element</li>');
insertAfter允许您在指定的元素之后插入select元素。 您创build的元素将在指定的select器结束标记之后放入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>');
append（）函数可能在jQuery中被称为add（） ，因为它有时会让人困惑。 你可能会认为它在给定的元素后面追加了一些东西，而实际上却将它添加到元素中。
代替
$("#header ul li:last")
尝试
$("#header ul")
$("#content ul").append('<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>');
这里是关于代码可读性（博客的无耻插件）的一些反馈。 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);
快乐编码:)
这是另一个
$("#header ul li").last().html('<li> Menu 5 </li>');
简单
// Creating and adding an element to the page at the same time. $( "ul" ).append( "<li>list item</li>" );
这是你能做到的最短的方法
list.push($('<li>', {text: blocks[i] })); $('ul').append(list);
数组中的块。 你需要遍历数组。
