Add html div using jQuery

Question

This is my html structure. I want to create a div using jQuery.

<div class="main">
    <div class="main-1">
    </div>
    <div class="main-2">
    </div>
    <div class="main-3">
    </div>
</div>

My expected output will contain another div with class="main-1" and class="main-2"

It should look like :-

<div class="main">
    <div class="newadd">
        <div class="main-1">
        </div>
        <div class="main-2">
        </div>
    </div>
    <div class="main-3">
    </div>
</div>

Here, newadd is the new class which need to add. I can select the main div using :-

jQuery(".main");

But, I am not sure how to add an extra div in-between existent divs.

Kamil Mierzyński · Accepted Answer · 2016-06-30 15:21:58Z

1

Use .wrapAll() :

$('.main .wrapMe').wrapAll("<div class='newadd' />")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="main-1 wrapMe">a
    </div>
    <div class="main-2 wrapMe">b
    </div>
    <div class="main-3">c
    </div>
</div>

answered Jun 30, 2016 at 15:21

Kamil Mierzyński

1958 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I'm Geeker · Accepted Answer · 2016-06-30 15:20:28Z

0

User wrapall

$('.main-1, .main-2,').wrapAll('<div class="newadd" />');

Output

<div class="main">
    <div class="newadd">
        <div class="main-1">
        </div>
   <div class="newadd">
        <div class="main-2">
        </div>
    </div>
    <div class="main-3">
    </div>
</div>

answered Jun 30, 2016 at 15:20

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

Add html div using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related