Как добавить элемент списка в середине списка с помощью JQuery

Question

У меня есть список с двумя элементами, я хочу добавить дополнительные элементы после первого элемента при загрузке содержимого. Как это делается? Я могу добавлять элементы, но они отображаются только в конце списка. Нужно ли мне звонить или использовать массив элементов списка?

Сначала я создаю новый элемент списка (<li>), а затем заполняю элемент списка содержимым. Но я думаю, что мне нужно определить позицию элемента списка до или во время добавления элемента 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

Чтобы добавить новый элемент после первого:

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

Answer 2

Вместо того, .appendTo() который добавит его до конца, как у вас есть:

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

Используйте .insertAfter() придерживаться его в нужном месте:

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

Вставьте его после :first<li></li> в том, что <ul>.