Question Comment ajouter
  • dans un
      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>
    

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


    489
    2017-07-17 19:28


    origine


    Réponses:


    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.

    720
    2017-07-17 19:29



    Vous pouvez le faire aussi de manière plus "object" 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 pas à vous battre avec des guillemets alors, mais vous devez garder trace des accolades :)


    488
    2017-11-09 09:33



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

    $("#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.


    47
    2018-01-18 07:06



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

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

    40
    2018-03-07 00:42



    jQuery est livré avec les options suivantes qui pourraient répondre à vos besoins 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é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 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>
    

    17
    2017-09-30 12:58



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

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

    le ajouter() fonction aurait probablement été appelée ajouter() en jQuery parce que parfois il confond les gens. On pourrait penser qu’il ajoute quelque chose après l’élément donné, ajoute à l'élément.


    14
    2017-07-17 19:30



    Au lieu de

    $("#header ul li:last")
    

    essayer

    $("#header ul")
    

    7
    2017-07-17 19:32



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

    6
    2017-07-17 19:29



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

    Voici quelques commentaires concernant la lisibilité du code (fiche sans vergogne 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);
    

    Codage heureux :)


    5
    2018-02-02 17:32



    C'est un autre

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

    2
    2017-09-30 12:49



    facile

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

    2
    2017-09-21 09:19