創建裏面有相同的類名的div一個div

我有我的HTML代碼的結構如下：創建裏面有相同的類名的div一個div

<div id="bb-bookblock" class="bb-bookblock"> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      Hello 
     </div> 
     <div class="bb-custom-side"> 
      <button id="add">Click Here to add The page</button>  
     </div> 
    </div> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      <p>This is first page</p> 
     </div> 
     <div class="bb-custom-side"> 
      <p>Hello</p> 
     </div> 
    </div> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      <p>This is second Page</p> 
     </div> 
     <div class="bb-custom-side"> 
      <p>This is last page</p> 
     </div> 
    </div> 
</div>

當我點擊按鈕，id=add我想最後bb-item分度，之後創建一個新的div同樣的兩個div裏面有類名bb-custom-side。
我知道如何使用createElement創建div，它是一個類，但我不知道如何在新創建的div內創建子div。我可以和最後一個孩子或類似的概念聯繫嗎？

所以後單擊事件我想我的HTML是這樣的：

<div id="bb-bookblock" class="bb-bookblock"> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      Hello 
     </div> 
     <div class="bb-custom-side"> 
      <button id="add">Click Here to add The page</button>  
     </div> 
    </div> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      <p>This is first page</p> 
     </div> 
     <div class="bb-custom-side"> 
      <p>Hello</p> 
     </div> 
    </div> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      <p>This is second Page</p> 
     </div> 
     <div class="bb-custom-side"> 
      <p>This is last page</p> 
     </div> 
    </div> 
    <--Newly created div--> 
    <div class="bb-item"> 
     <div class="bb-custom-side"> 
      new div 
     </div> 
     <div class="bb-custom-side"> 
      new div 2 
     </div> 
    </div> 
</div>

來源

2013-09-30 Jay Patel

使用clone()創建div元素的副本，並將其附加到主DIV：

$("#add").click(function(){ 
    var clonedDiv = $(".bb-item:last").clone(); 
    clonedDiv = clonedDiv.find("div.bb-custom-side p").text("This is third Page"); 
    $("#bb-bookblock").append(clonedDiv); 
});

DEMO FIDDLE

否TE：我剛更新了最後一個div的文本（這是第三頁）。你必須把它放在循環中以增加數量。

來源

2013-09-30 16:41:33 Unknown

然後如何更改新克隆的div的內容？ –

@ user2831921更新。檢查小提琴。 – Unknown

Thanx很多!!明白了!!但是，你能幫助我如何實際添加這些div，以便我可以看到我的文件被更新爲新的div！第三頁上升，如果我刷新我的內容。是他們任何方式來做到這一點？我想我的文件被更新，因爲它的新內容要顯示給用戶flipBook。 –

試試這個。

$('#add').on('click',function(){ 
     $('.bb-item').eq(1).append($('.bb-item:last-child').html()); 
    }); 

         OR 

    $('#add').click(function(){ 
     $('.bb-item').eq(1).append($('.bb-item:last-child').html()); 
    });

Working Demo

來源

2013-09-30 16:52:30 anand4tech

你可以試試這個。

$(document).ready(function() { 
    $("#add").click(function() { 
     $("#bb-bookblock").append('<div class="bb-item"><div class="bb-custom-side"> new div</div><div class="bb-custom-side">new div 2</div></div>'); 
    }); 
});

DEMO

來源

2013-09-30 16:58:48 errorintheapplication

這可能不會呼籲大家，但是，我個人傾向於喜歡我的克隆「一張白紙」。

如果是我，我會做到這一點：

var $baseItem = $("<div></div>").addClass("bb-item"); 
var $baseCustomSide = $("<div></div>").addClass("bb-custom-side"); 

$("#add").click(function(){ 
    var $newItem = $baseItem.clone(); 

    $newItem.append($baseCustomSide.clone().html("your_first_content_here")); 
    $newItem.append($baseCustomSide.clone().html("your_second_content_here")); 

    $("#bb-bookblock").append($newItem); 
});

除非有很好的理由重用現有的元素，我發現你最終不得不有很多更復雜「擦洗」來自克隆的現有內容。。。使用空白模板對我來說似乎總是比較乾淨。

來源

2013-09-30 17:14:02 talemyn

創建裏面有相同的類名的div一個div

回答

相關問題