javascript - 将元素移动到正文的末尾并返回到原始位置

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父元素。

然后(假设父元素的 ID 为 header_cart_parent)，您只需使用:

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

如果您不知道父 ID，您可以随时添加空 div哪里<div id="header_cart />是，在打开模式时，然后在关闭时将其删除:

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