Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery append(): Añadir o insertar contenido al final del elemento seleccionado

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:

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:

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:

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:

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:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies