CODEWITHSUNDEEP
javascripthtmljquery
laurence keith albano
laurence keith albano

Reputation: 1482

How to add a sub parent class inside the parent class using Jquery

Hi I want to add a sub parent class to my parent class using jQuery.

Previously I've tried this:

$('.my-parent').wrap('<div class="my-sub-parent"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="my-parent">
    <div class="child-items">1</div>
    <div class="child-items">2</div>
    <div class="child-items">3</div>
    <div class="child-items">4</div>
</div>

But this one inserts the class outside of my parent, not inside.

What I want to achieve is like this html structure:

<div class="my-parent">
    <div class="my-sub-parent">
        <div class="child-items"></div>
        <div class="child-items"></div>
        <div class="child-items"></div>
        <div class="child-items"></div>
    </div>
</div>

Is this achievable? Any help would be great. Thanks.

Upvotes: 1

Views: 25

Answers (1)

Mina
Mina

Reputation: 17099

You need wrapInner function.

$('.my-parent').wrapInner('<div class="my-sub-parent"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-parent">
    <div class="child-items">1</div>
    <div class="child-items">2</div>
    <div class="child-items">3</div>
    <div class="child-items">4</div>
</div>

For more resources.

https://api.jquery.com/wrapinner/

Upvotes: 1

Related Questions