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中，我正在使用追加做那样的事。

$("#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添加为父级的第一个孩子，请尝试前置...

$("#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)

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

6 个答案: