如何使用jQuery在div中动态添加div.它应该首先显示？

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.... 如果要将您的 div 添加为父项divs的第一个子项，请尝试添加...

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