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

Question

У меня есть такой родительский 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_4 th 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>

Как я могу так поступить.

Answer 1

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

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

Answer 2

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

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

Answer 3

Используйте prepend () вместо append () :

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

Answer 4

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

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

Answer 5

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

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

Answer 6

Вы ищете "prepend":

prepend Api

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