jQuery | wrapInner() con ejemplos

El método wrapInner() es un método incorporado en jQuery que se usa para envolver el elemento HTML alrededor del contenido de cada elemento seleccionado.

Sintaxis:

$(selector).wrapInner(wrap_element, function(index))

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • wrap_element: es un parámetro obligatorio y se usa para especificar el elemento HTML para envolver el contenido del elemento seleccionado
  • función: es un parámetro opcional y se utiliza para especificar la función que devuelve el elemento envolvente.
    • index: Devuelve el índice del elemento.

Valor devuelto: este método devuelve el elemento seleccionado con los cambios aplicados.

Los siguientes ejemplos ilustran el método wrapInner() en jQuery:

Ejemplo 1: este ejemplo no contiene parámetros opcionales.

<!DOCTYPE html>
<html>
    <head>
        <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() {
                $("div").click(function() {
                    $(this).wrapInner("<b></b>").css(
                           "background-color", "green");
                });
            });
        </script>
        <style>
            body {
                width: 200px;
                padding: 20px;
                height: 20px;
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <!-- click on this div and see the change -->
        <div>Welcome to GeeksforGeeks!</div>
       
    </body>
</html>

Salida:
Antes de hacer clic en el elemento div:

Después de hacer clic en el elemento div:

Ejemplo 2:

<!DOCTYPE html>
<html>
    <head>
        <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() {
                $("div").click(function() {
                    $("span").wrapInner(function(n) {
                        return "<i></i>";
                    });
                });
            });
        </script>
        <style>
            body {
                width: 250px;
                padding: 20px;
                height: 20px;
                font-size: 20px;
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <!-- click on this div and see the change -->
        <div>Welcome to <span>GeeksforGeeks!</span></div>
    </body>
</html>

Salida:
Antes de hacer clic en el elemento div:

Después de hacer clic en el elemento div:

Artículos relacionados:

Publicación traducida automáticamente

Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *