Jak dodać element listy do istniejącej listy nieuporządkowanej?

548

Mam kod, który wygląda następująco:

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

Chciałbym użyć jQuery, aby dodać następujące elementy do listy:

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

Próbowałem tego:

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

Ale to dodaje nowy li wewnątrz ostatniego li(tuż przed tagiem zamykającym), a nie po nim. Jak najlepiej to dodać li?

Eileen
źródło

Odpowiedzi:

816

To by to zrobiło:

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

Dwie rzeczy:

  • Możesz po prostu dołączyć <li>do <ul>siebie.
  • Musisz użyć cudzysłowu innego niż ten, którego używasz w kodzie HTML. Ponieważ w atrybutach używasz podwójnych cudzysłowów, otaczaj kod pojedynczymi cudzysłowami.
Paolo Bergantino
źródło
6
Czy nie powinno to być „#header” zamiast „#content”?
Dipak
15
tak na marginesie, możesz użyć prepend zamiast append w przypadku, gdy chcesz dodać jako pierwszy element zamiast ostatniego
Thomas
517

Możesz to zrobić również w bardziej „obiektowy sposób” i nadal łatwy do odczytania:

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

Nie musisz wtedy walczyć z cytatami, ale musisz śledzić nawiasy klamrowe :)

Żeglarz naddunajski
źródło
Czy Twoje podejście nie zapoczątkuje nowych tagów, ale ich nie zamknie?
everton
1
Nie, jquery tworzy tagi przy użyciu manipulacji DOM, więc musi tylko znać swoją nazwę
Danubian Sailor
Uwielbiam to. Nienawidzę mieszania się z ciągami znaków i cytatami: BTW: Inną opcją byłoby stackoverflow.com/a/4673436/112000
Tomáš Fejfar
2
Jest to zdecydowanie bardziej preferowany sposób, tj. Użycie metody bardziej obiektowej.
Czy
Czy jest coś do dodania wielu jednocześnie?
tyan
51

Co powiesz na użycie „po” zamiast „append”?

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

„.after ()” może wstawiać treść określoną przez parametr po każdym elemencie w zestawie dopasowanych elementów.

satomacoto
źródło
3
Dziękuję, to mi pomogło. Aby wstawić na środku listy, musisz użyć beforelub after.
Patrick Fisher,
1
to w połączeniu z odpowiedzią @ Danubian_Sailor uderzyło we mnie
bkwdesign
50

Jeśli dodajesz po prostu tekst li, możesz użyć:

 $("#ul").append($("<li>").text("Some Text."));
kravits88
źródło
20

jQuery zawiera następujące opcje, które mogą zaspokoić Twoje potrzeby w tym przypadku:

appendsłuży do dodawania elementu na końcu elementu nadrzędnego divokreślonego w selektorze:

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

prependsłuży do dodawania elementu u góry / początku elementu nadrzędnego divokreślonego w selektorze:

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

insertAfterpozwala wstawić wybrany element następnie za określonym elementem. Utworzony element zostanie następnie umieszczony w DOM po określonym znaczniku zamykającym selektor:

$('<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 zrobi coś przeciwnego do powyższego:

$('<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>
Ole Haugset
źródło
16

Powinieneś dołączyć do kontenera, a nie ostatni element:

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

Funkcja append () powinna być prawdopodobnie nazwana add () w jQuery, ponieważ czasami myli ludzi. Można by pomyśleć, że dodaje coś po danym elemencie, podczas gdy w rzeczywistości dodaje to do elementu.

Philippe Leybaert
źródło
7

Zamiast

$("#header ul li:last")

próbować

$("#header ul")
Adrian Godong
źródło
6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');
Evan Meagher
źródło
6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Oto kilka opinii dotyczących czytelności kodu (bezwstydna wtyczka do bloga). http://coderob.wordpress.com/2012/02/02/code-readability

Rozważ oddzielenie deklaracji nowych elementów od czynności dodania ich do UL. Wyglądałoby to mniej więcej tak:

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

Miłego kodowania :)

niezaprzeczalny
źródło
var newListItem = $ ('<li />', {html: messageCenterAnchor}); Jak zdobyć li i id?
jmogera
@jmogera, próbujesz ustawić identyfikator? Jeśli tak, możesz to zrobić w {}. Zaktualizowałem powyższy kod :)
undeniablyrob
3

To najkrótszy sposób, w jaki możesz to zrobić

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

Gdzie bloki w tablicy. i musisz zapętlić tablicę.

użytkownik3516328
źródło
2

To jest kolejny

$("#header ul li").last().html('<li> Menu 5 </li>');
Główny programista
źródło
2

łatwy

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
Kaleem Ullah
źródło