如何使用jQuery在div中动态添加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>

您正在观看100个对象中的第5个

在parentdiv中，我使用append来实现这一点

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

$（“#父”）.append（“您正在观看100个对象中的第5个”）；

但它是在child_第4分区之后出现的。但我需要在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>

您正在观看100个对象中的第5个
........
........
........
........

我怎样才能做到这一点。

使用而不是：

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

$（“#父项”）。前置(
“您正在观看100个对象中的第5个”）；

使用prepend而不是append：

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

$（“#父项”）.prepend（“您正在观看100个对象中的第5个”）；

使用jquery函数：将参数指定的内容插入到匹配元素集中每个元素的开头

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

$（'Selector'）。前置（$（'newdiv'）；

您正在查找“prepend”：

---

除了使用其他答案中提到的.prepend（）命令外，您还可以使用以下命令：

$（“您正在观看100个对象中的第5个”）.prependTo（“父对象”）；

请参见

$（“#父项”）。追加（”

在所选元素的末尾添加div。。。。 如果要将

div添加为父级的第一个子级，请尝试prepend

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

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

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