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

【问题标题】：How to add div dynamically inside a div using jQuery. It should display first also?如何使用 jQuery 在 div 中动态添加 div。它也应该首先显示？
【发布时间】：2012-03-07 16:21:54
【问题描述】：

我有一个这样的父 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>

我怎么能这样。

【问题讨论】：

标签： jquery jquery-ui dynamic html

【解决方案1】：

使用prepend() 代替append()：

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

【讨论】：

【解决方案2】：

使用前置而不是附加：

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

【讨论】：

【解决方案3】：

利用jquery函数.prepend()：将参数指定的内容插入到匹配元素集合中每个元素的开头

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

【讨论】：

【解决方案4】：

您正在寻找“前置”：

prepend Api

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

【讨论】：

【解决方案5】：

除了使用其他答案中提到的 .prepend() 命令外，您还可以使用.prependTo() 命令：

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

【讨论】：

【解决方案6】：

请参阅$("#parent").append("") 在所选元素的末尾添加您的 div.... 如果您想将 divs 添加为父级的第一个子级，请尝试添加...

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

【讨论】：