Cómo agregar div de manera dinámica dentro de un div usando jQuery. ¿Debería mostrar primero también?

Question

Tengo un padre div como este.

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

Quiero añadir un div así:

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

Dentro div padre estoy usando agregar a hacerlo así.

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

Pero viene después child_4 th div. Pero necesito mostrarlo justo debajo de child_1. No debería ser como esto

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

¿Cómo puedo hacer como esto.

Answer 1

maquillaje de la función jQuery .prepend(): Inserción de contenido, especificado por el parámetro, al comienzo de cada elemento en el conjunto de elementos coincidentes

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

Answer 2

Uso prepend() en lugar de append():

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

Answer 3

uso anteponer en lugar de anexar: uso

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

Answer 4

Se busca "anteponer":

prepend Api

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

Answer 5

Además de utilizar el comando .prepend() mencionado por las otras respuestas también se puede utilizar el comando .prependTo():

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

Answer 6

Consulte $("#parent").append("") agrega su div al final del elemento seleccionado .... si desea agregar su divs como el primer hijo del padre, pruebe antes de ...

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