Comment ajouter un élément de liste au milieu d'une liste avec JQuery

Question

J'ai une liste avec deux éléments, je veux ajouter des éléments supplémentaires après le premier élément lorsque le contenu est chargé. Comment cela est-il fait? Je peux ajouter des éléments, mais ils n'apparaissent qu'à la fin de la liste. Dois-je appeler ou utiliser le tableau d'éléments list?

D'abord, je crée le nouvel élément de la liste (<li>), puis je remplis l'élément de liste avec le contenu. Mais je pense que je dois définir la position de l'élément de liste avant ou pendant que j'ajoute l'élément li.

if(x > 0){ 
    $('<li></li>').attr('id','liAdult_'+x).appendTo($("ul:#ulAdultList")); 
    //$("ul:#ulAdultList").add($('<li></li>').attr('id','liAdult_'+x)).after($('#liAdult_0')); 
    $('<img/>').attr({'id':'imgAdultAvatar_'+x,'src':'./images/person_20x20.jpg','class':'imgAvatar','title':'The persons avatar','alt':'Avatar Adults'}).appendTo($('#liAdult_'+x)); 
    $('<span></span>').attr({'id':'sAdultFirstName_'+x,'class':'sAdultLine'}).html(xData.adults[x].personFirstName).appendTo($('#liAdult_'+x)); 
    $('<span></span>').attr({'id':'sAdultLastName_'+x,'class':'sAdultLine'}).html(xData.adults[x].personLastName).appendTo($('#liAdult_'+x)); 
    $('<span></span>').attr({'id':'sAdultParent_'+x,'class':'sAdultLine'}).html(xData.adults[x].guardianRole).appendTo($('#liAdult_'+x)); 
    $('<span></span>').attr({'id':'sAdultCellPhone_'+x,'class':'sAdultLine'}).html(xData.adults[x].personCellPhone).appendTo($('#liAdult_'+x)); 
    $('<input/>').attr({'id':'personId_'+x,'type':'hidden'}).val(xData.adults[x].personId).appendTo($('#liAdult_'+x)); 
    $('<a></a>').attr({'id':'lnkAdultProfile_'+x,'href':'#','name':'lnkAdultProfile_'+x,'title':'Edit the adult profile'}).html('Profile').appendTo($('#liAdult_'+x)); 
} 

Answer 1

Pour ajouter un nouvel élément après la première:

$('li:nth-child(1)').append('<li>New Item</li>'); 

Answer 2

Au lieu de .appendTo() qui vous l'ajouter à la fin comme avoir:

$('<li></li>').attr('id','liAdult_'+x).appendTo($("ul:#ulAdultList")); 

Utilisez .insertAfter() pour coller à l'endroit que vous voulez, comme ceci:

$('<li></li>').attr('id','liAdult_'+x).insertAfter("#ulAdultList li:first"); 

Cela l'insérera après le :first<li></li> dans ce <ul>.