Как добавить div динамически внутри div с помощью jQuery. Он должен также отображаться первым?

У меня есть родительский div, подобный этому.

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

Я хочу добавить один div следующим образом:

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

Внутри родительского div я использую append для этого.

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

Но он начинается после child_4th div. Но мне нужно отобразить его чуть ниже child_1. Он должен выглядеть следующим образом

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

Как я могу это сделать.

ОТВЕТЫ

Ответ 1

использовать функцию jquery .prepend(): вставить содержимое, заданное параметром, в начало каждого элемента в наборе согласованных элементы

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

Ответ 2

используйте preend вместо append:

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

Ответ 3

Используйте prepend() вместо добавить()

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

Ответ 4

Помимо использования команды .prepend(), упомянутой в других ответах, вы также можете использовать команду . prependTo():

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

Ответ 5

См. $("#parent").append("") добавляет ваш div в конце выбранного элемента.... если вы хотите добавить свой divs в качестве первого дочернего элемента родителя, попробуйте добавить...

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