Vamos a ver cómo se pueden añadir elementos con jQuery en una página web. Las funciones que vamos a ver son las siguientes:
jQuery append()
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.
Su sintaxis es la siguiente:
$(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.
Más información y ejemplos en este post:
jQuery prepend()
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.
Su sintaxis es la siguiente:
$(selector).prepend(contenido, funcion(index,html))
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.
Más información y ejemplos en este post:
jQuery after()
Tiene como funcionalidad añadir elementos después de otro elemento indicado dentro del DOM de una página web.
Su sintaxis es la siguiente:
$(selector).after(contenido,function(indice))
Os explico la sintaxis superior:
- selector (Obligatorio): Elemento selector después del cual se inserta el contenido.
- contenido (Obligatorio): Contenido a insertar, pudiendo ser un objeto jQuery, código HTML o elementos del DOM.
- function (indice): Función que devuelve el contenido a insertar, el valor indice devuelve la posición del elemento.
Más información y ejemplos en este post:
jQuery before()
Tiene como funcionalidad añadir elementos por delante de otros ya existentes dentro del DOM de una página web.
Su sintaxis es la siguiente:
$(selector).before(contenido,function(index));
Os explico la sintaxis superior:
- selector (Obligatorio): Elemento selector en el cual se inserta el contenido justo delante..
- contenido (Obligatorio): Contenido a insertar, pudiendo ser un objeto jQuery, código HTML o elementos del DOM.
- function (indice): Función que devuelve el contenido a insertar, el valor indice devuelve la posición del elemento.
Más información y ejemplos en este post: