.append() de jQuery inserta contenido al final de los elementos seleccionados, incluyendo texto, HTML u otros elementos, agregando contenido dinámicamente al DOM.
Leer másMétodos.
Métodos.
El método .detach() de jQuery se utiliza para eliminar elementos del DOM, pero mantiene todos sus datos y eventos asociados. Esto es útil cuando necesitas manipular elementos temporalmente sin perder sus datos o eventos, y luego volver a agregarlos al DOM.
Definición:
El método .detach() de jQuery se utiliza para eliminar elementos del DOM, conservando sus datos y eventos asociados.
Sintaxis:
index.js
JavaScript
$(selector).detach();selector: Un selector que indica los elementos que se eliminarán del DOM.
Ejemplo:
Eliminar un párrafo y luego volver a agregarlo.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .detach().</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
var $parrafo;
$("#botonEliminar").click(function() {
// Utiliza .detach() para eliminar el párrafo del DOM
// y almacenar el elemento en la variable $parrafo
$parrafo = $("#parrafo").detach();
});
$("#botonAgregar").click(function() {
// Verifica si $parrafo contiene un elemento
// y vuelve a agregarlo al div con id "contenedor"
if ($parrafo) {
$("#contenedor").append($parrafo);
}
});
});
</script>
<style>
#contenedor {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button id="botonEliminar">Eliminar Párrafo</button>
<button id="botonAgregar">Agregar Párrafo</button>
<div id="contenedor">
<!-- El párrafo se agregará aquí -->
</div>
<p id="parrafo">Este es un párrafo que será eliminado y luego agregado nuevamente.</p>
</body>
</html>
index.js
JavaScript
$parrafo = $("#parrafo").detach();Explicación del Ejemplo:
En este ejemplo, tenemos un párrafo con el id parrafo y dos botones: uno para eliminar el párrafo (botonEliminar) y otro para agregarlo nuevamente (botonAgregar). Cuando se hace clic en el botón “Eliminar Párrafo”, se ejecuta una función que utiliza el método .detach() para eliminar el párrafo del DOM y almacenar el elemento en la variable $parrafo. Cuando se hace clic en el botón “Agregar Párrafo”, se ejecuta una función que verifica si la variable $parrafo contiene un elemento y, de ser así, lo vuelve a agregar al final del body.
Resultado.
Este es un párrafo que será eliminado y luego agregado nuevamente.
