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:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA