2

我的 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>
</div>

当我单击按钮时，id=add我想在最后一个 div 之后创建一个新的 div，其中bb-item包含相同的两个 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>
4

4 回答 4

4

用于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

注意：我刚刚更新了最后一个 div 的文本（这是第三页）。你必须把它放在循环中以增加数量。

于 2013-09-30T16:41:33.937 回答
2

这可能不会吸引所有人，但就我个人而言，我倾向于喜欢“空白板”来进行克隆。

如果是我，我会这样做：

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);
});

除非有充分的理由重用现有元素，否则我发现您最终不得不更加复杂地从 clone 中“清理”现有内容。. . 使用空白模板对我来说似乎总是更干净。

于 2013-09-30T17:14:02.033 回答
2

你可以试试这个。

$(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>');
    });
});

演示

于 2013-09-30T16:58:48.700 回答
2

尝试这个。

   $('#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());
    });

工作演示

于 2013-09-30T16:52:30.643 回答