javascript - 单击时加载已删除的 div 元素

Question

我有以下两个 div 元素:

<div class='staticMap'></div>
<div class='geolocation-common-map'></div>

加载页面时，使用 jQuery 删除名为 'geolocation-common-map' 的 div。我想知道在单击 div 'staticMap' 后如何再次加载此 div。到目前为止，我有以下 jQuery，但我需要替换 .show() 函数。

$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
   $('.geolocation-common-map').show();
   $('.staticMap').remove();
   event.preventDefault();
});

有什么想法可以做到这一点吗？

提前谢谢您。

Answer 1

根据detach documentation :

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

您可以按如下方式使用它:

var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');

$('.staticMap').on("click", function(event) {
  dv_geolocation_common_map.insertAfter(dv_staticMap)
   dv_staticMap.detach();
   event.preventDefault();
});

.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>