web-dev-qa-db-fra.com

Comment ajouter <li> dans un <ul> existant?

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>

J'aimerais 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 le dernier li (juste avant la balise de fermeture), pas après. Quelle est la meilleure façon d'ajouter ceci li?

jqueryjquery-append
535
Eileen

Cela le ferait:

$("#header ul").append('<li><a href="/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, puisque vous utilisez des guillemets doubles dans vos attributs, entourez le code de guillemets simples.
795
Paolo Bergantino

Vous pouvez le faire aussi 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'êtes pas obligé de vous battre avec des guillemets, mais vous devez garder une trace d'accolades :)

510
Danubian Sailor

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

$("#content ul li:last").after('<li><a href="/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 de l'ensemble d'éléments correspondants.

51
satomacoto

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

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

jQuery propose les options suivantes qui pourraient répondre à vos besoins dans ce cas:

append permet d'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/au début du parent 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 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 de 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 l'inverse 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>
19
Ole Haugset

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

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

La fonction append () aurait probablement dû s'appeler add () dans jQuery car cela confond parfois les gens. Vous penseriez qu'il ajoute quelque chose après l'élément donné, alors qu'il l'ajoute à l'élément .

14
Philippe Leybaert

Au lieu de

$("#header ul li:last")

essayer

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

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

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

Bonne codage :)

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

C'est le moyen le plus court de le faire

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

Où blocs dans un tableau. et vous devez parcourir le tableau en boucle.

3
user3516328

facile

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

Ceci est un autre

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