El método wrap() es un método incorporado en jQuery que se usa para envolver el elemento especificado alrededor del elemento seleccionado.
Sintaxis:
$(selector).wrap(element, function)
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- elemento: es un parámetro obligatorio que se utiliza para especificar el elemento que envuelve los elementos seleccionados.
- función: es un parámetro opcional que se utiliza para especificar la función que devuelve el elemento envolvente.
Valor devuelto: este método devuelve el elemento seleccionado con los cambios especificados realizados por el método wrap().
Los siguientes ejemplos ilustran el método wrap() en jQuery:
Ejemplo 1: este ejemplo no acepta parámetros opcionales.
<!DOCTYPE html>
<html>
<head>
<title>The wrap() Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").wrap("<div></div>");
});
});
</script>
<style>
div {
background-color: lightgreen;
padding: 20px;
width: 200px;
font-weight: bold;
height: 60px;
border: 2px solid green;
}
</style>
</head>
<body>
<!-- click on this paragraph and see the change -->
<p>Welcome to GeeksforGeeks!</p><br>
<button>Click Here!</button>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>The wrap Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").wrap(function() {
return "<div></div>"
});
});
});
</script>
<style>
div {
background-color: lightgreen;
padding: 20px;
width: 200px;
font-weight: bold;
height: 60px;
border: 2px solid green;
}
</style>
</head>
<body>
<!-- click on this paragraph and see the change -->
<p>Welcome to GeeksforGeeks!</p><br>
<button>Click Here!</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA