Repaso a la función de jQuery append() que tiene como funcionalidad añadir o insertar contenido al final del elemento seleccionado. El caso opuesto lo tenemos con prepend() que añade contenido al comienzo.
Otras funciones de jQuery interesantes que puedan ser de utilidad son:
Sintaxis de jQuery append()
Veamos la sintaxis extraída de su web oficial:
1 |
$(selector).append(contenido, funcion(index,html)) |
Repasemos los parámetros a pasar:
- selector (Obligatorio): Elemento selector en el que hay que insertar el contenido al final del mismo.
- contenido (Obligatorio): Contenido a insertar. Pudiendo ser objetos jQuery, HTML, texto…
- index: Devuelve la posición del elemento selector en caso de haber varios del mismo tipo.
- html: Devuelve el código HTML del elemento selector.
Ejemplo de jQuery append() para añadir texto al final de un párrafo
Vayamos con un primer ejemplo de append() para verlo en funcionamiento:
1 2 3 4 5 |
$(document).ready(function(){ $("#boton").click(function(){ $("#parrafo").append("<br>texto añadido al final del párrafo."); }); }); |
Os explico el ejempo:
- Detectamos el click en el botón con id=»boton».
- En el elemento con id=»parrafo» añadimos con append() un texto.
El código HTML del ejemplo es el siguiente:
1 2 3 4 5 6 |
<p id="parrafo"> Inicio del párrafo.<br> <input type="button" id="boton" value="Añadir texto al final del párrafo"> <br> Final del párrafo </p> |
Ejemplo de jQuery append() usando una función
En este segundo ejemplo de append() vamos a usar una función para añadir contenido al final cada elemento de una lista:
1 2 3 4 5 6 7 |
$(document).ready(function(){ $("#boton").click(function(){ $("ul#listas li").append(function(n){ return "--> Este elemento de la lista tiene el índice: " + n + "."; }); }); }); |
Os explico este segundo ejemplo
- Detectamos el click en el botón con id=»boton».
- En la lista con id=»listas» añadimos con append() un texto en cada elemento indicando su número de índice mediante una función.
El código HTML del segundo ejemplo es el siguiente:
1 2 3 4 5 6 7 8 |
<p id="parrafo"> <ul id="listas"> <li>Elemento lista 1</li> <li>Elemento lista 2</li> <li>Elemento lista 3</li> </ul> <input type="button" id="boton" value="Añadir elemento al final de la lista"> </p> |