Agregar elementos en jQuery se usa para agregar el contenido en el documento . Los métodos que se utilizan para agregar el contenido se enumeran a continuación:
- append(): Inserta contenido al final de los elementos seleccionados.
- prepend(): Inserta contenido al principio de los elementos seleccionados.
- after(): Inserta contenido después de los elementos seleccionados.
- before(): Inserta contenido antes de los elementos seleccionados.
Usando el método append(): El método append() en jQuery se usa para agregar un nuevo elemento al final del elemento seleccionado.
Sintaxis:
$(selector).append("element_to_be_inserted")
Parámetro: este método acepta un solo elemento de parámetro que debe insertarse.
Valor devuelto: No devuelve nada.
Ejemplo: Este ejemplo usa el método append() para agregar un nuevo elemento.
<html> <head> <title>Append Elements</title> <head> <body> <ol> <li></li> <li></li> <li></li> </ol> <button type="button" id="add_li" name="Add"> Add List </button> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Script to use append method to add list --> <script type="text/javascript"> $(document).ready( function() { $("#add_li").click( function() { $("ol").append("<li></li>") }) }) </script> </body> </html>
Producción:
Usando el método prepend(): El método prepend() en jQuery se usa para agregar un nuevo elemento al comienzo del elemento seleccionado.
Sintaxis:
$(selector).prepend("element_to_be_inserted")
Parámetro: este método acepta un solo parámetro que se insertará en el DOM como parámetro.
Valor devuelto: No devuelve ningún valor.
Ejemplo: Este ejemplo usa el método prepend() para agregar un nuevo párrafo.
<!DOCTYPE html> <html> <head> <title> prepend() method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <head> <body> <div id="container"> <p id="p-first">The first paragraph</p> <p id="p-second">The second paragraph</p> <p id="p-third">The third paragraph</p> </div> <button type="button" id="add_p" name="Add Elements"> Add Element </button> <!-- Script to use prepend() method to add elements--> <script type="text/javascript"> $(document).ready( function() { $("#add_p").click( function() { $("#container").prepend("<p>prepended paragraph</p>") }) }) </script> Prepend </body> </html>
Producción:
Uso del método after: El método after() en jQuery se usa para insertar contenido después del elemento seleccionado.
Sintaxis:
$(selector).after("element_to_be_inserted")
Parámetro: este método acepta un único parámetro que se utiliza para insertarse en el DOM como parámetro.
Valor devuelto: No devuelve nada.
Ejemplo: este ejemplo usa el método after() para agregar una palabra después de la imagen geeksforgeeks.
<!DOCTYPE html> <html> <head> <title> Add Elements using after() method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png" alt="jQuery" width="100" height="140"><br><br> <button id="btn1">Insert After</button> <!-- Script to use after() method to append content --> <script type="text/javascript"> $(document).ready( function() { $("#btn1").click(function() { $("img").after("<i>After</i>"); }); }) </script> </body> </html>
Producción:
Usando el método before: El método before() en jQuery se usa para insertar contenido antes del elemento seleccionado.
Sintaxis:
$(selector).before("element_to_be_inserted")
Parámetro: este método acepta un único parámetro que se utiliza para insertarse en el DOM como parámetro.
Valor devuelto: No devuelve nada.
Ejemplo: Este ejemplo usa el método before para agregar un elemento antes de la imagen geeksforgeeks.
<!DOCTYPE html> <html> <head> <title> Add Element using before() method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190222001705/images1.png" alt="jQuery" width="100" height="140"><br><br> <button id="btn1">Insert before</button> <!-- Script to use before() method to add element --> <script type="text/javascript"> $(document).ready( function() { $("#btn1").click(function() { $("img").before("<i>Before</i>"); }); }) </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulkumarmandal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA