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


jQuery prepend(): Añadir o insertar contenido al comienzo de un elemento

Repaso a la función de jQuery prepend() que tiene como funcionalidad añadir o insertar contenido al comienzo del elemento seleccionado. El caso opuesto lo tenemos con append() que añade contenido al final.

Otras funciones de jQuery interesantes que puedan ser de utilidad son:

Sintaxis de jQuery prepend()

Veamos la sintaxis extraída de su web oficial:

Repasemos los parámetros disponibles:

  • selector (Obligatorio): Elemento selector en el que hay que insertar el contenido al principio 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 prepend() para añadir texto al final de un párrafo

Vayamos con un primer ejemplo de prepend() 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 prepend() un texto.

El código HTML del ejemplo es el siguiente:

Ejemplo de jQuery prepend() usando una función

En este segundo ejemplo de prepend() 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 prepend() un texto al comienzo de 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