Javascript 将图元移动到主体末端并返回到原始位置

我有下面的代码，它是在网页上打开模式时执行的。当模式打开时，它将div id=“header\u cart”移动到主体的末端

      $(document).on('opening', '#modal', function (e) {
        $(document.body).append( $('#header_cart').detach() );
      });

但我也希望div id=“header\u cart”在该模式关闭时返回到其原始位置

    $(document).on('closing', '#modal', function (e) {
        ........
    });

---

我不是javascript方面的专家，所以我需要关于如何添加点以使“header”购物车在模式框关闭后返回其位置的帮助。

再次将该元素添加到其原始位置，如下面的代码所示

<div id ="div1">Hello Div 1</div>
<div id ="div2">Hello Div 2</div>
<div id ="div3">Hello Div 3</div>
<button id ="div1button">Div1</button>
<button id ="div2button">Div2</button>
<button id ="div3button">Div3</button>

<script>
$("#div1button").click(function(){
    $("#div3").append( $('#div1').detach() );
})

$("#div3button").click(function(){
    $("#div2").prepend( $('#div1').detach() );
})
</script>

Hello Div 1
你好，第二组
你好，第三组
第一组
第二组
第三组
$（“#div1按钮”）。单击（函数（）{
$（“#div3”）.append（$（'#div1'）.detach（））；
})
$（“#div3button”）。单击（函数（）{
$（“#div2”）.prepend（$（'#div1'）.detach（））；
})

您需要在打开模式时输入您的

was的ID，然后在关闭模式时将其删除：

/** OPENING **/
$(document).on('opening', '#modal', function (e) {
    $('#header_cart').after('<div id="header_cart_after"></div>');
    $(document.body).append( $('#header_cart').detach() );
});

/** CLOSING **/
$(document).on('closing', '#modal', function (e) {
    $('#header_cart_after').before( $('#header_cart').detach() );
    $('#header_cart_after').detach();
});

/**打开**/
$（文档）.on（'opening'，'#modal'，函数（e）{
$（“#标题_车”）。在（“”）之后；
$（document.body）.append（$（'#header_cart'）.detach（））；
});
/**结束**/
$（文档）.on（'closing'，'#modal'，函数（e）{
$（'#header_cart_after'）。之前（$（'#header_cart'）。分离（）；
$（“#标题_cart_after”）.detach（）；
});

Downvoter，请解释此代码的错误。这会很有帮助。抱歉，没有看到您的评论。我否决了你的答案，原因有二：1。您的代码片段与OP的问题没有任何共同之处，您应该尝试使其适应问题。2.

#div1

将永远不会返回到示例中的原始位置，它将位于

#div3

或

#div2

的内部，两者都不是其原始位置。您应该考虑使用<代码>前（<）/代码>和<代码>（）<代码> >而不是<代码>预置（）/<代码>和<代码>附录（）>代码>谢谢您的输入。我可以添加一个父元素，以便该选项对我有效。谢谢

/** OPENING **/
$(document).on('opening', '#modal', function (e) {
    $('#header_cart').after('<div id="header_cart_after"></div>');
    $(document.body).append( $('#header_cart').detach() );
});

/** CLOSING **/
$(document).on('closing', '#modal', function (e) {
    $('#header_cart_after').before( $('#header_cart').detach() );
    $('#header_cart_after').detach();
});