Moving a div and inserting into another one, after another div

JavaScript
1

Hi there,

I have the following code:

  <div class="slider">
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
  </div>
  <div class="product-video">
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
    </video>
  </div>

I would like to move the video from the current div into a new div with the class slide after the last slide div above.

I have tried this, which moves it to the end, but I would like to add it into a a div so it has the slide class.

So it becomes:

 <div class="slider">
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
    <div class="slide">
      <div class="woocommerce-product-gallery__image">image</div>
    </div>
 <div class="slide">
      <div class="woocommerce-product-gallery__image">VIDEO HERE</div>
    </div>
  </div>

This is what I have tried:
jQuery(".product-video ").appendTo(".product-slider .slider > .slide:last-of-type ");

Can anyone suggest how to get the video into it’s own slide class and at the end of the other slide divs?

Many thanks!

2

Hi @toolman, you can create a new div like $('<div class="slide" />'), and append the video to that… for example:

$('.product-video video')
  .appendTo('<div class="slide" />')
  .parent() // Reference to the newly created div
  .appendTo('.slider')
1 Like
3

That’s awesome, thank you :slight_smile:

1 Like
4

Happy to help.:-)

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.