Este método append() en jQuery se usa para insertar algún contenido al final de los elementos seleccionados.
Sintaxis:
$(selector).append( content, function(index, html) )
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 y se utiliza para especificar el contenido que se insertará al final de los elementos seleccionados. El valor posible de los contenidos son elementos HTML, objetos jQuery y elementos DOM.
- function(index, html): Es un parámetro opcional y se utiliza para especificar la función que devolverá el contenido a insertar.
- index: Se utiliza para devolver la posición de índice del elemento.
- html: Se utiliza para devolver el HTML actual del elemento seleccionado.
Ejemplo 1: este ejemplo agrega el contenido al final del párrafo y la lista.
<!DOCTYPE html> <html> <head> <title> jQuery append() Method </title> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Script to append content --> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Append Geeks</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Append Gfg</li>"); }); }); </script> </head> <body> <h1 style="margin-left: 150px;">Geeks</h1> <p>GeeksforGeeks</p> <p>Jquery</p> <ol> <li>Gfg 1</li> <li>Gfg 2</li> <li>Gfg 3</li> </ol> <button id="btn1">Append Geeks</button> <button id="btn2">Append Gfg</button> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega el contenido al final del párrafo.
<!DOCTYPE html> <html> <head> <title> jQuery append() Method </title> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Script to append content --> <script> $(document).ready(function() { $("button").click(function() { $("p").append(function(n) { return "<b> Index of Element is " + n + ".</b>"; }); }); }); </script> </head> <body> <h1 style="margin-left:150px;">Geeks</h1> <p>Geeks for Geeks</p> <p>Jquery_append</p> <button> Insertion using Append Method() </button> </body> </html>
Producción:
- 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 riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA