Jquery - if element contains a class, add HTML after element

Question

I've got a booking form.booking-wrap with 2 elements in it, div#booking and then div.quantity

<form class="booking-wrap"> 
    <div id="booking"></div>
    /* insert div#message IF div.quantity is present inside div.booking-wrap */ 
    <div class="quantity"></div>
</form>

The div.quantity is only present dynamically for some bookings.

What I am trying to achieve is that if the div.quantity is present, then I would like to insert an additional html div#message, but this new div should appear after div#booking and before div.quantity

I am trying the following jQuery:

if($('.booking-wrap:has(div.quantity)')){
  $('#booking' ) .after( '<div id="message">Message</div>');
}

But that doesn't seem to work.

I then tried this:

$('.booking-wrap:has(div.quantity)').append($('<div id="message">Message</div>'));

This works and the new div appears, however it is just next to the quantity div.

How can I get it to show after the #booking , but before .quantity?

Mamun · Accepted Answer · 2019-10-21 05:48:59Z

1

Any selector returns an object, you should check the length property of the returned object. Like $('.booking-wrap:has(div.quantity)').length

Though, I prefer $('.booking-wrap > div.quantity').length

if($('.booking-wrap > div.quantity').length){
  $('#booking').after('<div id="message">Message</div>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="booking-wrap">
  <div id="booking">booking</div>
  <div class="quantity">quantity</div>
</form>

edited Oct 21, 2019 at 5:48

answered Oct 21, 2019 at 5:24

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

Joe Bloggs Over a year ago

Btw what does the length property do?

Mamun Over a year ago

@JoeBloggs, the selector returns object, that is why you have to check the length property:)

Nikola Petrovic · Accepted Answer · 2019-10-21 05:22:21Z

1

Try using prepend instead of append, since the selector $('.booking-wrap:has(div.quantity) will return the (div.quantity) element.

Example:

$('.booking-wrap:has(div.quantity)').prepend($('<div id="message">Message</div>'));

answered Oct 21, 2019 at 5:22

Nikola Petrovic

1012 silver badges9 bronze badges

2 Comments

Joe Bloggs Over a year ago

Many thanks Nikola, I'll go with Mamun's answer for this one ..

Nikola Petrovic Over a year ago

Using prepend is simpler and cleaner, but I don't mind :"D Best of luck with your project.

Abhishek Gupta · Accepted Answer · 2019-10-21 05:28:27Z

0

You can use "hasClass()" jQuery function to check class is exist or not:

Try This

if($( ".booking-wrap" ).children('div').hasClass( "quantity" )){
  jQuery('<div id="message">Message</div>').insertAfter('.booking');
}

answered Oct 21, 2019 at 5:28

Abhishek Gupta

1091 silver badge7 bronze badges

Comments

Krupal Panchal · Accepted Answer · 2019-10-21 05:33:35Z

0

Try This jQuery.

if($(".quantity").length ){
    $('#booking' ).after( '<div id="message">Message</div>');
}

edited Oct 21, 2019 at 5:33

answered Oct 21, 2019 at 5:30

Krupal Panchal

1,5452 gold badges15 silver badges27 bronze badges

Comments

craft9861 · Accepted Answer · 2019-10-21 05:46:22Z

0

You need to put the div you are adding within a function.

        if($('.booking-wrap:has(div.quantity)')){
            $( "#booking" ).after(function() {
                return '<div id="message">Message</div>';
            });
        }

answered Oct 21, 2019 at 5:46

craft9861

2142 silver badges8 bronze badges

Collectives™ on Stack Overflow

Jquery - if element contains a class, add HTML after element

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related