Comment ajouter un élément de liste à une liste existante non ordonnée?


548

J'ai un code qui ressemble à ceci:

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

Je voudrais utiliser jQuery pour ajouter ce qui suit à la liste:

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

J'ai essayé ceci:

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

Mais cela ajoute le nouveau li à l' intérieur du dernier li(juste avant la balise de fermeture), pas après. Quelle est la meilleure façon d'ajouter cela li?

Réponses:


816

Cela le ferait:

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

Deux choses:

  • Vous pouvez simplement ajouter le <li>au <ul>lui - même.
  • Vous devez utiliser le type de guillemets opposé à celui que vous utilisez dans votre code HTML. Donc, comme vous utilisez des guillemets doubles dans vos attributs, entourez le code de guillemets simples.

6
Ne devrait-il pas s'agir de '#header' au lieu de '#content'?
Dipak

15
juste comme note latérale, vous pouvez utiliser le préfixe au lieu de l'ajout au cas où vous voudriez ajouter comme premier élément au lieu du dernier
Thomas

517

Vous pouvez également le faire de manière plus «objet» et toujours facile à lire:

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

Vous n'avez donc pas à vous battre avec des guillemets, mais vous devez garder une trace d'accolades :)


Votre approche ne commencerait-elle pas de nouvelles balises sans les fermer?
everton

1
Non, jquery crée des balises en utilisant la manipulation DOM, il n'a donc qu'à connaître son nom
Danubian Sailor

J'aime cela. Je déteste jouer avec les chaînes et les guillemets :) BTW: L'autre option serait stackoverflow.com/a/4673436/112000
Tomáš Fejfar

2
C'est de loin la manière la plus préférable, c'est-à-dire d'utiliser la manière la plus orientée objet.
Will

Y a-t-il un pour ajouter plusieurs en même temps ??
tyan

51

Que diriez-vous d'utiliser "après" au lieu de "ajouter".

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

".after ()" peut insérer du contenu, spécifié par le paramètre, après chaque élément dans l'ensemble des éléments correspondants.


3
Merci, cela m'a aidé. Pour insérer au milieu d'une liste, vous devez utiliser beforeou after.
Patrick Fisher

1
ceci combiné avec la réponse de @ Danubian_Sailor a frappé la place pour moi
bkwdesign

50

Si vous ajoutez simplement du texte li, vous pouvez utiliser:

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

20

jQuery est livré avec les options suivantes qui pourraient répondre à votre besoin dans ce cas:

appendest utilisé pour ajouter un élément à la fin du parent divspécifié dans le sélecteur:

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

prependest utilisé pour ajouter un élément en haut / début du parent divspécifié dans le sélecteur:

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

insertAftervous permet d'insérer un élément de votre sélection après un élément que vous spécifiez. Votre élément créé sera ensuite placé dans le DOM après la balise de fermeture du sélecteur spécifiée:

$('<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 fera le contraire de ce qui précède:

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

Vous devez ajouter au conteneur, pas au dernier élément:

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

La fonction append () aurait probablement dû être appelée add () dans jQuery car elle déroute parfois les gens. On pourrait penser qu'il ajoute quelque chose après l'élément donné, alors qu'il l' ajoute réellement à l'élément.



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

Voici quelques commentaires concernant la lisibilité du code (plug sans vergogne pour un blog). http://coderob.wordpress.com/2012/02/02/code-readability

Pensez à séparer la déclaration de vos nouveaux éléments de l'action de les ajouter à votre UL. Cela ressemblerait à ceci:

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

Bon codage :)


var newListItem = $ ('<li />', {html: messageCenterAnchor}); Comment obtenir le li et l'id?
jmogera

@jmogera, essayez-vous de définir l'identifiant? Si c'est le cas, vous pouvez simplement le faire à l'intérieur des {}. J'ai mis à jour le code ci-dessus :)
undeniablyrob

3

C'est le moyen le plus court de le faire

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

Où bloque dans un tableau. et vous devez parcourir le tableau.



2

facile

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.