如何用Javascript移动一个HTML元素到另一个元素

Question

我需要使用Javascript或Jquery将div移动到DOM树中的不同位置。例如，我需要将shopByType移动到ShopBycolor之后。我尝试了追加和插入，但没有成功。

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

Answer 1

您可以使用useinsertAfter()如下:

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>