如何在Div之間動態添加div

Question

我的靜態頁面中有一系列DIV標籤。在根據業務規則加載頁面時，我需要在標籤之間動態地嵌入DIV標籤。

注意：要求是不添加它作爲設計中隱藏並顯示它基於業務規則。

我的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 1

只要把網頁的任​​意位置上的負載，然後$(document).ready()中使用jQuery的insertAfter()功能。

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

注：如果它是隱藏與否沒關係的功能將火在開始的時候。

Answer 2

我認爲jQuery after是你在找什麼。您可以添加由給定選擇器匹配的元素/ textafter元素。

$(".insertAfterMe").after("<div>Inserted DIV</div>");

div { 
 
    margin: 3px; 
 
    border: 1px solid; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h2>Greetings</h2> 
 
    <div class="insertAfterMe">Hello</div> 
 
    <div>Goodbye</div> 
 
</div>