Comment ajouter <li> dans un <ul>?

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 les éléments suivants à 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 qui ajoute la nouvelle li à l'intérieur de la dernière li (juste avant la balise de fermeture), pas après. Quelle est la meilleure façon d'ajouter cette li?

InformationsquelleAutor Eileen | 2009-07-17

jquery jquery-append

790

Ce serait faire:
```
$("#header ul").append('<li><a href="/user/messages">Message Center</a></li>');
```
Deux choses:
- Vous pouvez simplement ajouter le <li> à la <ul> lui-même.
- Vous devez utiliser le type opposé de citations que ce que vous utilisez dans votre code HTML. Donc, puisque vous utilisez des guillemets dans vos attributs, entourer le code avec des guillemets simples.
- Ne devrait-elle pas être "#header "au lieu de "#contenu"?
- tout comme une note de côté, vous pouvez utiliser le préfixe au lieu de "ajouter" dans le cas où vous souhaitez ajouter en tant que le premier élément au lieu de la dernière
InformationsquelleAutor Paolo Bergantino
509

Vous pouvez le faire aussi en plus de l'objet way " et toujours facile à lire:
```
$('#content ul').append(
 $('<li>').append(
 $('<a>').attr('href','/user/messages').append(
 $('').attr('class', 'tab').append("Message center")
))); 
```
Vous n'avez pas à lutter avec des citations ensuite, mais il doit garder la trace de croisillons 🙂
- Ne serait-ce pas votre approche de commencer de nouvelles balises, mais pas les fermer?
- Non, jquery crée des balises à l'aide de manipulation du DOM, de sorte qu'il n'y a qu'à savoir son nom
- J'adore cette. Je déteste jouer avec des cordes et des citations 🙂 BTW: d'Autres choix serait la stackoverflow.com/a/4673436/112000
- n'est-ce pas plus lent?
- C'est de loin la plus préférable, c'est-à utiliser le plus de manière orientée objet.
- Est-il à apend multi en même temps??
InformationsquelleAutor Danubian Sailor
51

Comment sur l'utilisation de "après" au lieu de "ajouter".
```
$("#content ul li:last").after('<li><a href="/user/messages">Message Center</a></li>');
```
".après()" peut insérer du contenu, spécifié par le paramètre, après chaque élément de l'ensemble des éléments qui correspondent.
- Merci, cela m'a aidé. À insérer dans le milieu d'une liste, vous devez utiliser before ou after.
- ceci, combiné avec @Danubian_Sailor la réponse de frapper la tache pour moi
InformationsquelleAutor satomacoto
44

Si vous êtes tout simplement l'ajout de texte dans ce li, vous pouvez utiliser:
```
 $("#ul").append($("<li>").text("Some Text."));
```
InformationsquelleAutor kravits88
19

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

append est utilisé pour ajouter un élément à la fin du parent div spécifié dans le sélecteur:
```
$('ul.tabs').append('<li>An element</li>');
```
prepend est utilisé pour ajouter un élément en haut/départ de la mère div spécifié dans le sélecteur:
```
$('ul.tabs').prepend('<li>An element</li>');
```
insertAfter vous permet d'insérer un élément de votre sélection suivante après un élément que vous spécifiez. Votre élément sera ensuite mis dans les DOM suivant le sélecteur de balise de fermeture:
```
$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit">Edit</a></li>
<li>An element</li>
```
insertBefore va faire 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">Edit</a></li>
```
InformationsquelleAutor Ole Haugset
14

Vous devez ajouter au conteneur, pas le dernier élément:
```
$("#content ul").append('<li><a href="/user/messages">Message Center</a></li>');
```
La append() fonction doit avez probablement été appelé ajouter() en jQuery, car il confond parfois les gens. On pourrait penser qu'il ajoute quelque chose après l'élément donné, alors qu'il fait ajoute à l'élément.

InformationsquelleAutor Philippe Leybaert
7

Au lieu de
```
$("#header ul li:last")
```
essayer
```
$("#header ul")
```
InformationsquelleAutor Adrian Godong

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

InformationsquelleAutor Evan Meagher

6
```
$("#content ul").append('<li><a href="/user/messages">Message Center</a></li>');
```
Voici quelques commentaires concernant la Lisibilité du Code (shameless plug pour un blog).
http://coderob.wordpress.com/2012/02/02/code-readability

Envisager de séparer la déclaration de vos éléments nouveaux à partir de l'action de l'ajoutant à votre UL.. Il ressemblerait à quelque chose comme ceci:
```
var tabSpan = $('', {
 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);
```
Heureux de codage 🙂
- var newListItem = $('<li/>', { html: messageCenterAnchor }); Comment puis-je obtenir le li et id?
- êtes-vous essayer de définir l'id? Si oui, vous pouvez le faire à l'intérieur de la { } s'. J'ai mis à jour le code ci-dessus 🙂
InformationsquelleAutor undeniablyrob
3

C'est le chemin le plus court, vous pouvez le faire
```
list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);
```
Où les blocs dans un tableau. et vous avez besoin d'une boucle sur le tableau.

InformationsquelleAutor user3516328

C'est un autre

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

InformationsquelleAutor Lead Developer

facile

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

InformationsquelleAutor Kaleem Ullah

Vous devez vous connecter pour publier un commentaire.