Como adicionar um item de lista a uma lista não ordenada existente?


548

Eu tenho um código que se parece com isso:

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

Eu gostaria de usar o jQuery para adicionar o seguinte à lista:

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

Eu tentei isso:

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

Mas isso adiciona o novo li dentro do último li(pouco antes da tag de fechamento), não depois dela. Qual é a melhor maneira de adicionar isso li?

Respostas:


816

Isso faria isso:

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

Duas coisas:

  • Você pode simplesmente anexar o <li>ao <ul>próprio.
  • Você precisa usar o tipo de aspas oposto ao que está usando no seu HTML. Portanto, como você usa aspas duplas em seus atributos, coloque o código entre aspas simples.

6
Não deveria ser '#header' em vez de '#content'?
Dipak

15
assim como uma nota lateral, você pode usar preceder em vez de acrescentar no caso de você deseja adicionar como o primeiro elemento em vez do último
Thomas

517

Você também pode fazê-lo de uma maneira mais "objetiva" e ainda fácil de ler:

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

Você não precisa lutar com aspas, mas deve acompanhar os aparelhos :)


Sua abordagem não inicia novas tags, mas não as fecha?
everton 12/01

1
Não, jquery cria tags usando manipulação DOM, por isso só tem de saber é nome
Danubian Sailor

Eu amo isto. Eu odeio mexer com cordas e citações :) BTW: Outra opção seria stackoverflow.com/a/4673436/112000
Tomáš Fejfar

2
Essa é de longe a maneira mais preferível, ou seja, usar a maneira mais orientada a objetos.
Will

Existe alguém para anexar multi ao mesmo tempo?
tyan 23/09/16

51

Que tal usar "depois" em vez de "acrescentar".

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

".after ()" pode inserir conteúdo, especificado pelo parâmetro, após cada elemento no conjunto de elementos correspondentes.


3
Obrigado, isso me ajudou. Para inserir no meio de uma lista, você precisa usar beforeou after.
Patrick Fisher

1
isso combinado com @ resposta de Danubian_Sailor bater o ponto para mim
bkwdesign

50

Se você está simplesmente adicionando texto li, pode usar:

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

20

O jQuery vem com as seguintes opções que podem atender sua necessidade neste caso:

appendé usado para adicionar um elemento no final do pai divespecificado no seletor:

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

prependé usado para adicionar um elemento na parte superior / inicial do pai divespecificado no seletor:

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

insertAfterpermite inserir um elemento da sua seleção a seguir, depois de um elemento que você especificar. Seu elemento criado será colocado no DOM após a tag de fechamento do seletor especificada:

$('<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 fará o oposto do acima:

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

16

Você deve anexar ao contêiner, não o último elemento:

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

A função append () provavelmente deveria ter sido chamada add () no jQuery porque às vezes confunde as pessoas. Você poderia pensar que acrescenta algo após o elemento especificado, enquanto na verdade o adiciona ao elemento.



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

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

Aqui estão alguns comentários sobre a legibilidade do código (plug descarado para um blog). http://coderob.wordpress.com/2012/02/02/code-readability

Considere separar a declaração de seus novos elementos da ação de adicioná-los ao seu UL. Seria algo assim:

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

Feliz codificação :)


var newListItem = $ ('<li />', {html: messageCenterAnchor}); Como obtenho o li e o id?
jmogera

@ jmogera, você está tentando definir o ID? Se sim, você pode fazer isso dentro dos {} 's. Eu atualizei o código acima :)
undeniablyrob

3

Esta é a maneira mais curta de fazer isso

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

Onde blocos em uma matriz. e você precisa percorrer a matriz.



2

fácil

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.