Bagaimana cara menambahkan item daftar ke daftar unordered yang ada?

Saya memiliki kode yang terlihat seperti ini:

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

Saya ingin menggunakan jQuery untuk menambahkan yang berikut ke daftar:

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

Saya mencoba ini:

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

Tapi itu menambahkan yang baru li di dalam yang terakhir li(tepat sebelum tag penutup), bukan setelahnya. Apa cara terbaik untuk menambahkan ini li?

Ini akan melakukannya:

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

Dua hal:

• Anda bisa menambahkan <li>ke <ul>itu sendiri.
• Anda perlu menggunakan jenis kutipan yang berlawanan dari yang Anda gunakan di HTML. Jadi karena Anda menggunakan tanda kutip ganda dalam atribut Anda, mengelilingi kode dengan tanda kutip tunggal.

Anda juga dapat melakukannya dengan lebih 'cara objek' dan masih mudah dibaca:

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

Anda tidak harus berkelahi dengan tanda kutip, tetapi harus tetap melacak kawat gigi :)

Bagaimana kalau menggunakan "setelah" alih-alih "menambahkan".

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

".after ()" dapat menyisipkan konten, ditentukan oleh parameter, setelah setiap elemen dalam set elemen yang cocok.

Jika Anda hanya menambahkan teks di dalamnya li, Anda dapat menggunakan:

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

jQuery hadir dengan opsi-opsi berikut yang dapat memenuhi kebutuhan Anda dalam hal ini:

appenddigunakan untuk menambahkan elemen di akhir induk yang divditentukan dalam pemilih:

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

prependdigunakan untuk menambahkan elemen di bagian atas / awal dari induk yang divditentukan dalam pemilih:

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

insertAftermemungkinkan Anda memasukkan elemen pilihan Anda berikutnya setelah elemen yang Anda tentukan. Elemen yang Anda buat kemudian akan dimasukkan ke dalam DOM setelah tag penutup pemilih yang ditentukan:

$('<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 akan melakukan kebalikan dari yang di atas:

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

Anda harus menambahkan ke wadah, bukan elemen terakhir:

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

Fungsi append () mungkin seharusnya disebut add () di jQuery karena terkadang membingungkan orang. Anda akan berpikir itu menambahkan sesuatu setelah elemen yang diberikan, sementara itu sebenarnya menambahkannya ke elemen.

Dari pada

$("#header ul li:last")

mencoba

$("#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>');

Berikut ini beberapa umpan balik mengenai Keterbacaan Kode (plug-out yang tidak tahu malu untuk blog). http://coderob.wordpress.com/2012/02/02/code-readability

Pertimbangkan memisahkan deklarasi elemen baru Anda dari tindakan menambahkannya ke UL Anda. Akan terlihat seperti ini:

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

Selamat coding :)

Ini adalah cara terpendek yang dapat Anda lakukan

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

Di mana blok dalam array. dan Anda perlu mengulang melalui array.

Ini satu lagi

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

mudah

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