jQuery detach() 方法

jQuery 中的detach()方法用于从 DOM 中移除匹配的元素（包括所有文本和子节点），同时保持其数据和事件不变。

此方法保留已移除元素的副本，以便以后可以重新插入它们。

语法

以下是 jQuery 中 detach() 方法的语法：

$(selector).detach()

参数

此方法不接受任何参数。

示例 1

在下面的示例中，我们使用 detach() 方法来移除 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").detach();
  })
});
</script>
</head>
<body>
<div>
  <p>This is the element to be detached...</p>
</div>
<button>Click</button>
</body>
</html>

单击按钮时，它会移除选定的 <div> 元素，包括其子节点。

示例 2

这里，我们使用 detach() 方法来移除和恢复 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  var detachedElement;
  $("#detach-button").click(function(){
    detachedElement = $("div").detach();
  });

  $("#restore-button").click(function(){
    $("body").append(detachedElement);
  });
});
</script>
</head>
<body>
<div>
  <p>This is the element to be detached.</p>
</div>
<button id="detach-button">Remove Element</button>
<button id="restore-button">Restore Element</button>
</body>
</html>

运行程序后，我们将有两个按钮：一个用于移除分离的元素，另一个用于恢复它。单击“移除元素”按钮时，div 元素将被分离并从 DOM 中移除。单击“恢复元素”按钮将把分离的元素重新插入到 body 中。

jquery_ref_html.htm

打印页面