將元素移至主體末端並返回原始位置

Question

我有下面的代碼，該代碼在網頁上打開模式時執行。 打開模態時，它將div id =“ header_cart”移動到主體的末尾。

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

但我也希望在該模式關閉時將div id =“ header_cart”返回到其原始位置。

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

我不是javascript方面的專家，因此我需要幫助，以代替點號使模版框關閉后使#header_cart返回其位置。

Answer 1

您將需要您的<div id="header_cart />父元素的ID。

然后（假設父元素的header_cart_parent為header_cart_parent作為其ID），您只需使用：

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

如果您不知道父ID，則可以在打開模式時始終在<div id="header_cart />所在的位置添加一個空div ，然后在關閉時將其刪除：

/** 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();
});

Answer 2

再次將該元素添加到其原始位置，如以下代碼所示

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