Javascript 在具有相同类名的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>
</div>

用于创建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);
});

注意：我刚刚更新了最后一个div的文本（这是第三页）。您必须将其放入循环以增加数量。

试试这个

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

您可以试试这个

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

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（“#bb书芯”）。追加（'new div new div 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);
});

var$baseItem=$（“”）。addClass（“bb项”）；
var$baseCustomSide=$（“”）。addClass（“bb自定义端”）；
$（“#添加”）。单击（函数（）{
var$newItem=$baseItem.clone（）；
$newItem.append（$baseCustomSide.clone（）.html（“您的第一个内容”）；
$newItem.append（$baseCustomSide.clone（）.html（“此处为您的第二个内容”）；
$（“#bb书芯”）。追加（$newItem）；
});

---

除非有很好的理由重用现有的元素，否则我发现要从克隆中“删除”现有的内容，最终要复杂得多。使用空白模板对我来说总是更干净。

然后如何更改新克隆的div的内容？@user2831921更新。查一查小提琴。比很多！！知道了！！但是你能帮助我如何实际添加这些div，这样我就可以看到我的文件被更新为一个新的div！！如果我刷新我的内容，第三页会上升。有什么办法吗？我希望更新我的文件，因为它的新内容将在“动画书”中显示给用户。如果你说的是更新数据文件，那就有点复杂了。您要么通过表单提交新数据，要么通过Ajax调用更新数据。这是一个完全不同的话题。：）是的，我可以用ajax调用试试！！我已经用过了！！很多

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