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>
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>