Lucky Lucky - 5 months ago 11
jQuery Question

How to dynamically add a div in between Divs

I have a series of DIV tags in my static page. While loading the page, based on business rules, I need to embed a DIV tag dynamically in between the tags.

Note: The requirement is is not to add it as a hidden during design and show it based on the business rule.

My HTML,

<div class="header">
<div class="titles-bar">
<div id="dvDynamicHeader">
<div id="mainTabsGroups1" data-enhance="false">
<ul class="tabs left">
<li class="current" id="tabCustomers"><a href="#">Customers</a></li>
</ul>
</div>
<!--Dynamic div-->
<div id="mainTabsGroups2" data-enhance="false">
<ul class="tabs left">
<li><a id="tabBusinessUnits" href="#">Business Units</a></li>
</ul>
</div>
<!--End of Dynamic div-->
<div id="mainTabsGroups3" data-enhance="false">
<ul class="tabs left">
<li class="current" id="tabCustomers"><a href="#">Customers</a></li>
<li><a id="tabApplications" href="#">Applications</a></li>
</ul>
</div>
</div>
</div>
</div>

Answer

Just put it anywhere on the page on the load and then within the $(document).ready() use the jQuery insertAfter() function.

$(document).ready(function(){
     $('#insertedDiv).insertAfter("#firstDiv");
});

NOTE: It doesn't matter if it's hidden or not as the function will fire at the very beginning.