Come aggiungere dinamicamente div all'interno di un div usando jQuery. Dovrebbe essere visualizzato anche per primo?

Question

Ho una div genitore come questa.

<div id='parent'> 
    <div id='child_1'>........</div> 
    <div id='child_2'>........</div> 
    <div id='child_3'>........</div> 
    <div id='child_4'>........</div> 
</div> 

voglio aggiungere un div in questo modo:

<div id='page_number'> You are watching 5th object out of 100 </div> 

All'interno div genitore sto usando accodare a fare così.

$("#parent").append("<div id='page_number'> You are watching 5th object out of 100 </div>"); 

Ma il suo arrivo dopo il figlio_4 ° div. Ma ho bisogno di mostrarlo appena al di sotto di child_1. Dovrebbe venire come questo

<div id='parent'> 
    <div id='page_number'> You are watching 5th object out of 100 </div> 
    <div id='child_1'>........</div> 
    <div id='child_2'>........</div> 
    <div id='child_3'>........</div> 
    <div id='child_4'>........</div> 
</div> 

Come posso fare in questo modo.

Answer 1

marca della funzione jquery .prepend(): Inserire contenuto, specificato dal parametro, all'inizio di ogni elemento nel set di elementi corrispondenti

$('Selector ').prepend($('<div> new div </div>')); 

Answer 2

Uso prepend() invece di append():

$("#parent").prepend(
    "<div id='page_number'> You are watching 5th object out of 100 </div>"); 

Answer 3

uso anteporre al posto di accodamento: utilizzo

$("#parent").prepend("<div id='page_number'> You are watching 5th object out of 100 </div>"); 

Answer 4

Siete alla ricerca di "anteporre":

prepend Api

$("#parent").prepend(Your HTML) 

Answer 5

Oltre ad utilizzare il comando .prepend() fornita dal altre risposte è anche possibile utilizzare il comando .prependTo():

$("<div id='page_number'>You are watching 5th object out of 100 </div>").prependTo("#parent"); 

Answer 6

Vedere $("#parent").append("") aggiunge il div alla fine dell'elemento selezionato .... se si desidera aggiungere il proprio divs come primo figlio del genitore, provare prima ...

$("#parent").prepend("");