Làm cách nào để thêm một mục danh sách vào danh sách không có thứ tự hiện có?

Tôi có mã trông như thế này:

<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>

Tôi muốn sử dụng jQuery để thêm các mục sau vào danh sách:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

Tôi đã thử điều này:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

Nhưng điều đó thêm cái mới li bên trong cái cuối cùng li(ngay trước thẻ đóng), không phải sau nó. Cách tốt nhất để thêm điều này là ligì?

Điều này sẽ làm điều đó:

$("#header ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Hai điều:

• Bạn chỉ có thể nối thêm <li>vào <ul>chính nó.
• Bạn cần sử dụng loại trích dẫn ngược lại so với những gì bạn đang sử dụng trong HTML của mình. Vì vậy, vì bạn đang sử dụng dấu ngoặc kép trong thuộc tính của mình, hãy bao quanh mã bằng dấu ngoặc đơn.

Bạn cũng có thể làm điều đó theo nhiều cách 'đối tượng' hơn và vẫn dễ đọc:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

Sau đó, bạn không phải chiến đấu với dấu ngoặc kép, nhưng phải theo dõi dấu ngoặc nhọn :)

Làm thế nào về việc sử dụng "sau" thay vì "chắp thêm".

$("#content ul li:last").after('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

".after ()" có thể chèn nội dung, được chỉ định bởi tham số, sau mỗi phần tử trong tập hợp các phần tử khớp.

Nếu bạn chỉ cần thêm văn bản vào đó li, bạn có thể sử dụng:

 $("#ul").append($("<li>").text("Some Text."));

jQuery đi kèm với các tùy chọn sau có thể đáp ứng nhu cầu của bạn trong trường hợp này:

appendđược sử dụng để thêm một phần tử ở cuối phần cha mẹ divđược chỉ định trong bộ chọn:

$('ul.tabs').append('<li>An element</li>');

prependđược sử dụng để thêm một phần tử ở đầu / bắt đầu của cha divđược chỉ định trong bộ chọn:

$('ul.tabs').prepend('<li>An element</li>');

insertAftercho phép bạn chèn một phần tử của lựa chọn tiếp theo sau một phần tử bạn chỉ định. Phần tử đã tạo của bạn sau đó sẽ được đưa vào DOM sau thẻ đóng bộ chọn được chỉ định:

$('<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 sẽ làm ngược lại với những điều trên:

$('<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>

Bạn nên nối vào container, không phải phần tử cuối cùng:

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Hàm append () có thể đã được gọi là add () trong jQuery vì đôi khi nó làm mọi người nhầm lẫn. Bạn sẽ nghĩ rằng nó nối thêm một cái gì đó sau phần tử đã cho, trong khi nó thực sự thêm nó vào phần tử.

Thay vì

$("#header ul li:last")

thử

$("#header ul")

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Dưới đây là một số phản hồi liên quan đến Khả năng đọc mã (không biết xấu hổ cho blog). http://coderob.wordpress.com/2012/02/02/code-readability

Xem xét tách phần khai báo các phần tử mới của bạn khỏi hành động thêm chúng vào UL của bạn .. Nó sẽ trông giống như thế này:

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);

Chúc mừng mã hóa :)

Đây là cách ngắn nhất bạn có thể làm điều đó

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

Trường hợp khối trong một mảng. và bạn cần lặp qua mảng.

Đây là một cái khác

$("#header ul li").last().html('<li> Menu 5 </li>');

dễ dàng

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );