javascript - Create a div inside div with same class name - Stack Overflow

admin管理员组

文章数量:1401589

I have the following structure of my HTML code:

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

When I click on button with id=add I want to create the a new div after the last bb-item div with same two div inside it having class name bb-custom-side.
I know how to create the div using createElement and it a class, but I don't know how to create the sub div inside that newly created div. Can I associate with the last child or similar concept?

So after click event I want my HTML to be something like this:

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

I have the following structure of my HTML code:

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

When I click on button with id=add I want to create the a new div after the last bb-item div with same two div inside it having class name bb-custom-side.
I know how to create the div using createElement and it a class, but I don't know how to create the sub div inside that newly created div. Can I associate with the last child or similar concept?

So after click event I want my HTML to be something like this:

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

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 30, 2013 at 16:35 Bucket 7,53199 gold badges3737 silver badges4848 bronze badges asked Sep 30, 2013 at 16:29 Jay PatelJay Patel 1,35666 gold badges2020 silver badges4141 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Use clone() to create copy of div elements and append it to main 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

NOTE: I just updated text for last div (This is third Page). You have to put it in loop to increase number.

Try this.

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

You can try this.

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

This may not appeal to everyone, but, personally, I tend to like "blank slates" for my cloning.

If it were me, I would do this:

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

Unless there is a really good reason to reuse an existing element, I find you end up having to be a lot more plex to "scrub" the existing content from the clone . . . using a blank template always seems more clean to me.

本文标签： javascriptCreate a div inside div with same class nameStack Overflow