Mevcut bir sıralanmamış listeye liste öğesi nasıl eklenir?

Şöyle görünüyor kodu var:

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

Listeye aşağıdakileri eklemek için jQuery kullanmak istiyorum:

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

Bunu denedim:

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

Ama bu yeni ekler li içini son lideğil, ondan sonra (kapanış etiketinden hemen önce). Bunu eklemenin en iyi yolu nedir li?

Bunu yapar:

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

İki şey:

• Sadece ekleyebilirsiniz <li>için <ul>kendisi.
• HTML'nizde kullandığınızdan farklı türde alıntılar kullanmanız gerekir. Niteliklerinizde çift tırnak kullandığınız için, kodu tek tırnak işaretleri içine alın.

Bunu daha 'nesne şeklinde' ve yine de okunması kolay bir şekilde yapabilirsiniz:

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

O zaman tırnak işaretleri ile savaşmak zorunda değilsiniz, ancak diş teli izini tutmak gerekir :)

"Append" yerine "after" kullanmaya ne dersiniz?

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

".after ()", eşleşen öğeler kümesindeki her öğeden sonra parametre tarafından belirtilen içeriği ekleyebilir.

Buna sadece metin ekliyorsanız liaşağıdakileri kullanabilirsiniz:

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

jQuery, bu durumda ihtiyacınızı karşılayabilecek aşağıdaki seçeneklerle birlikte gelir:

appenddivseçicide belirtilen üst öğenin sonuna bir öğe eklemek için kullanılır :

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

prependdivseçicide belirtilen üst öğenin üstüne / başına bir öğe eklemek için kullanılır :

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

insertAfterbelirttiğiniz bir öğenin arkasına seçiminizin bir öğesini eklemenizi sağlar. Oluşturulan öğeniz daha sonra belirtilen seçici kapanış etiketinden sonra DOM'a yerleştirilir:

$('<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 yukarıdakilerin tersini yapacak:

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

Son öğeye değil, kaba eklemelisiniz:

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

Append () fonksiyonu muhtemelen çağırıldım gereken eklenti () bazen insanların kafasını karıştıran çünkü jQuery. Verilen öğeye bir şey eklediğini düşünürken , öğeye aslında ekler .

Onun yerine

$("#header ul li:last")

Deneyin

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

Kod Okunabilirliği (bir blog için utanmaz fiş) ile ilgili bazı geri bildirimler. http://coderob.wordpress.com/2012/02/02/code-readability

Yeni öğelerinizin beyanını, bunları UL'nize ekleme eyleminden ayırmayı düşünün. Bu gibi görünecektir:

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

Mutlu kodlama :)

Bunu yapmanın en kısa yolu budur

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

Bir dizideki bloklar nerede. ve dizi boyunca döngü yapmalısınız.

Bu başka bir tane

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

kolay

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