El método prepend() es un método incorporado en jQuery que se usa para insertar un contenido específico al comienzo del elemento seleccionado.
Sintaxis:
$(selector).prepend(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 insertar.
- función: es un parámetro opcional que se utiliza para especificar la función a realizar después de la llamada.
Valor devuelto: este método devuelve el elemento seleccionado con los cambios especificados realizados por el método prepend().
Los siguientes ejemplos ilustran el método prepend() en jQuery:
Ejemplo 1: Este ejemplo no contiene parámetros opcionales.
html
<!DOCTYPE html> <html> <head> <title>The prepend 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").prepend("Welcome to "); }); }); </script> <style> div { width: 350px; height: 100px; font-weight: bold; padding:20px; font-size: 25px; border: 2px solid green; } </style> </head> <body> <div> <p>GeeksforGeeks!</p> <!-- Click on this button to see the change --> <button>Click Here!</button> </div> </body> </html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo contiene un parámetro opcional.
html
<!DOCTYPE html> <html> <head> <title>The prepend 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").prepend(function() { return "<b>Hello "; }); }); }); </script> <style> div { width: 350px; height: 100px; font-weight: bold; padding:20px; font-size: 25px; border: 2px solid green; } </style> </head> <body> <div> <p>Contributor!</p> <!-- Click on this button to see the change --> <button>Click Here!</button> </div> </body> </html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botó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