jQuery | replaceWith() con ejemplos

El método replaceWith() es un método incorporado en jQuery que se usa para reemplazar el elemento seleccionado con el nuevo.

Sintaxis:

$(selector).replaceWith(content, function)

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • contenido: es un parámetro obligatorio que se utiliza para especificar el contenido que se debe reemplazar.
  • para2: Es un parámetro opcional que se realiza después de llamar.

Valor devuelto: este método devuelve el elemento seleccionado con el cambio.

Los siguientes códigos ilustran el método replaceWith() en jQuery:

Ejemplo 1:

<!DOCTYPE html>
<html>
    <head>
        <title>The replaceWith method</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <style>
            button {
                display: block;
                margin: 10px;
                color: red;
                width: 200px;
                padding: 3px;
            }
            div {
                color: green;
                border: 2px solid green;
                width: 200px;
                margin: 3px;
                padding: 5px;
                font-size: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!-- click on individual button and see the change -->
        <button>Geeks</button>
        <button>for</button>
        <button>Geeks</button>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            $("button").click(function() {
                $(this).replaceWith("<div>" + $(this).text() + "</div>");
            });
        </script>
    </body>
</html>

Salida:
Antes de hacer clic en cualquier botón:

Después de hacer clic en todos los botones:

Ejemplo 2: en el siguiente código se pasa la función opcional.

<!DOCTYPE html>
<html>
    <head>
        <title>The replaceWith method</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <style>
            button {
                display: block;
                margin: 4px;
                color: green;
                width: 150px;
                padding: 5px;
            }
            div {
                width: 200px;
                height: 100px;
                padding: 20px;
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Welcome to </p>
              
            <!-- click on this button and see the change -->
            <button>Click Here!</button>
        </div>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            var x = "GeeksforGeeks!";
            $("button").click(function() {
                $("p").replaceWith(x).replaceWith(function(n) {
                    alert("Click ok and string will replace");
                    return n;
                });
            });
        </script>
    </body>
</html>

Producción:
replacewith

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 *