'How to Move an HTML Element after another element with Javascript [closed]

I need to use Javascript or Jquery to move a div to a different place in the DOM tree. for example, I need to move shopByType after ShopBycolor. I tried append and insertbefore with no luck.

<form id="filter_form">
    <div class="Block ShopByColor Moveable Panel" id="ShopByType">
    <div class="Block ShopByColor Moveable Panel" id="ShopBySize">
    <div class="Block ShopByColor Moveable Panel" id="ShopByColor">
    <div class="Block ShopByColor Moveable Panel" id="ShopByGender">
</form>

javascript jquery

Solution 1:^[1]

you can use use insertAfter() as follows:

let shopType = $("#ShopByType");
let shopColor = $("#ShopByColor");

shopType.insertAfter(shopColor);

<form id="filter_form">
  <div class="Block ShopByColor Moveable Panel" id="ShopByType">ShopByType</div>
  <div class="Block ShopByColor Moveable Panel" id="ShopBySize">ShopBySize</div>
  <div class="Block ShopByColor Moveable Panel" id="ShopByColor">ShopByColor</div>
  <div class="Block ShopByColor Moveable Panel" id="ShopByGender">ShopByGender</div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to Move an HTML Element after another element with Javascript [closed]

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]