I would like to move one `DIV` element beside another, it is normally like this: ``` ... ... ... ... ... ... ... ... ``` I want to change the position of the `div` with the class `.price` to be after the `.name` class, to look like this: ``` ... ... // HERE ... ... ... ... // HERE ... ... ```

How to move an element after another element using JS or jquery?

html, javascript, jquery

Solution

You can use `insertAfter` to move the element. Docs

$('.price').each(function() {
    $(this).insertAfter($(this).parent().find('.name'));
});

Here you have the updated fiddle.

Problem

I would like to move one `DIV` element beside another, it is normally like this: ``` <div class="box-content-top"> <div class="box-related-product-top"> <div> <div class="price"> ... </div> <div class="image"> ... </div> <div class="name"> ... </div> <div class="cart"> ... </div> <div> <div class="price"> ... </div> <div class="image"> ... </div> <div class="name"> ... </div> <div class="cart"> ... </div> </div> </div> ``` I want to change the position of the `div` with the class `.price` to be after the `.name` class, to look like this: ``` <div class="box-content-top"> <div class="box-related-product-top"> <div> <div class="image"> ... </div> <div class="name"> ... </div> <div class="price"> // HERE ... </div> <div class="cart"> ... </div> <div> <div class="image"> ... </div> <div class="name"> ... </div> <div class="price"> // HERE ... </div> <div class="cart"> ... </div> </div> </div> ```

Original source