Question

我的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的按钮时，我想在最后一个bb-item div之后创建一个新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>

Answer 1

使用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的文本（这是第三页）。你必须把它放在循环中以增加数量。

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

<强> Working Demo

Answer 3

你可以试试这个。

$(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

Answer 4

这可能对每个人都没有吸引力，但就个人而言，我倾向于喜欢克隆的“空白石板”。

如果是我，我会这样做：

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

除非有充分的理由重用现有元素，否则我发现最终必须要复制“擦除”克隆中的现有内容。。。使用空白模板对我来说似乎总是更干净。

在div中创建一个具有相同类名的div

4 个答案: