CODEWITHSUNDEEP
javascriptjqueryhtml
The Dead Man
The Dead Man

Reputation: 5566

How to append element to a 4th element child using jQuery?

I have section in which I have slider now I want to append element to a 4th element inside its children.

Here is my HTML

Here is what I have tried so far

 $(".owl-stage>div:nth-child(4)").after("<div>inserted div</div>");

What do I need to change to get what I want?

Upvotes: 0

Views: 114

Answers (2)

Devsi Odedra
Devsi Odedra

Reputation: 5322

You can append as below using .owl-item and with index of child element, you want to insert after 4th element so you can use 3 index

$(".owl-stage div.owl-item:eq(4)").after("<div>inserted div</div>");

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

If you wish to append some element to the 4'th element use $(".owl-stage>div:nth-child(4) .item:eq(1) .text-center").append("<div>inserted div</div>");

Now if you run the demo and scroll all the way down and inspect inserted div then you can see it's appended to <div class="owl-item active" style="width: 1140px;">

Demo

$(".owl-stage>div:nth-child(4) .item:eq(1) .text-center").append("<div>inserted div</div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-stage">
  <div class="owl-item cloned" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item cloned" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/Grow-your-brand.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

        </div>
        <div class="col-md-6 text-center">
          <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/videommerce_share_your_story.png">
        </div>
      </div>
    </div>
  </div>
  <div class="owl-item active" style="width: 1140px;">
    <div class="item">
      <div class="row sec-padding flex-center">
        <div class="col-md-6 mb-50px z-index-1">

          <div class="col-md-6 text-center">
            <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
          </div>
        </div>
      </div>
    </div>
    <div class="owl-item" style="width: 1140px;">
      <div class="item">
        <div class="row sec-padding flex-center">
          <div class="col-md-6 mb-50px z-index-1">

          </div>
          <div class="col-md-6 text-center">
            <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/Grow-your-brand.png">
          </div>
        </div>
      </div>
    </div>
    <div class="owl-item cloned" style="width: 1140px;">
      <div class="item">
        <div class="row sec-padding flex-center">
          <div class="col-md-6 mb-50px z-index-1">

            <div class="col-md-6 text-center">
              <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/05/videommerce_share_your_story.png">
            </div>
          </div>
        </div>
      </div>
      <div class="owl-item cloned" style="width: 1140px;">
        <div class="item">
          <div class="row sec-padding flex-center">
            <div class="col-md-6 mb-50px z-index-1">

            </div>
            <div class="col-md-6 text-center">
              <img alt="img" src="https://videommerce.com/wp-content/uploads/2019/09/grafika_do_filmu2.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions