JQuery, una biblioteca de JavaScript, hace que numerosas tareas de programación web sean extremadamente fáciles de cumplir. Las tareas que normalmente tomarían múltiples líneas de código se logran, como el manejo de eventos, las animaciones o AJAX, se pueden hacer en una sola línea de código. Además de estas tareas, es posible agregar elementos HTML con gran facilidad utilizando múltiples métodos proporcionados en jQuery.

Esta guía le enseñará cómo agregar elementos HTML a través de jQuery utilizando varios métodos con la ayuda de ejemplos apropiados.

Cómo agregar elementos HTML a través de jQuery

jQuery proporciona los siguientes cuatro métodos para agregar elementos HTML.

1. adjuntar()
2. prepend ()
3. antes()
4. después()

Aquí hemos discutido todo esto en detalle.

método append ()

El método append () agrega un elemento como un niño dentro de un elemento especificado. Se necesita un número ilimitado de nuevos elementos HTML en forma de parámetros.

Este método funciona de manera que los elementos HTML se generan utilizando Text/HTML, JQuery o JavaScript. Posteriormente, esos elementos recién generados se agregan como el último niño que usa el método append ().

Ejemplo

Supongamos que desea agregar nuevos elementos al final de una lista ordenada utilizando el método append (). Use el siguiente código.

Html

1. Artículo


2. Artículo


3. Artículo

En el código anterior, hemos hecho un botón y también creamos una lista ordenada.

jQuery

Usando el método jQuery append () agregaremos otro elemento a la lista haciendo clic en el botón.

Producción

Había tres elementos en la lista, inicialmente.

Supongamos que hace clic en el botón tres veces.

Se agregan tres elementos más a la lista.

método prepend ()

Este método funciona de manera similar al del método append () con la única diferencia que, en lugar de agregar los elementos HTML recién creados, preparará los elementos como el primer niño. También toma un número ilimitado de nuevos elementos HTML en forma de parámetros.

Ejemplo

Usaremos el mismo ejemplo que el anterior y veremos cómo funciona el método prepend ().

jQuery

En el fragmento de código anterior, estamos utilizando el método prepend () para agregar elementos al inicio de la lista ordenada.

Producción

Originalmente había tres elementos en la lista.

Supongamos que hace clic en el botón dos veces.

Se agregan dos elementos al comienzo de la lista ordenada.

Método antes ()

El método antes () toma un número ilimitado de nuevos elementos HTML en forma de parámetros. Este método funciona de manera que los elementos HTML se generan utilizando Text/HTML, JQuery o JavaScript y se agregan antes de un elemento ya existente como hermano.

Ejemplo

Supongamos que desea agregar un encabezado antes de un párrafo haciendo clic en un botón. Esto se puede hacer usando el método antes ().

Html

Algún párrafo.

En el código anterior hemos creado

, y elementos. Ahora usaremos el método antes () para agregar un encabezado antes del párrafo.

jQuery

Producción

El método antes () funciona correctamente

método después ()

Este método toma un número ilimitado de nuevos elementos HTML en forma de parámetros. Este método funciona de manera similar al del método antes () con la única diferencia es que los nuevos elementos HTML se agregan como hermano pero después de los elementos ya existentes.

Ejemplo

Supongamos que desea agregar un párrafo después de un encabezado haciendo clic en un botón. Esto se puede hacer usando el método After ().

Html

Título

En el código anterior hemos creado

, y elementos, y usando el método después () se agregará un párrafo después del encabezado.

jQuery

Producción

Agregó con éxito un párrafo después del encabezado.

Conclusión

Los elementos HTML se pueden agregar utilizando varios métodos proporcionados por jQuery como append (), prepend (), antes () y después (). Todos estos métodos toman un número ilimitado de nuevos elementos HTML en forma de parámetros y una vez que se generan los elementos se agregan a sus posiciones apropiadas con respecto al método utilizado. Todos estos métodos se discuten en profundidad en esta guía, junto con ejemplos relevantes.