jQuery - Agregar elementos

Con jQuery, es muy fácil agregar nuevos elementos/contenido.

Agregar nuevo contenido HTML

Aprenderemos cuatro métodos de jQuery para agregar contenido nuevo:

  • append() - inserta contenido al final del elemento seleccionado
  • prepend() - inserta contenido al comienzo del elemento seleccionado
  • after() - inserta contenido después del elemento seleccionado
  • before() - inserta contenido antes del elemento seleccionado

Método jQuery append()

El método jQuery append() inserta contenido al final del elemento seleccionado (aún dentro del elemento).

Ejemplo

$("p").append("Agregar texto al final");

Pruébalo »

Método jQuery prepend()

El método jQuery prepend() inserta contenido al comienzo del elemento seleccionado.

Ejemplo

$("p").prepend("Agregar texto al comienzo");

Pruébalo »

Agregar varios elementos nuevos con los métodos append() y prepend()

En el ejemplo anterior, solo insertamos texto/HTML al comienzo/final del elemento seleccionado.

Sin embargo, los métodos append() y prepend() pueden recibir una cantidad ilimitada de nuevos elementos mediante parámetros. Se puede generar texto/HTML con jQuery (como en el ejemplo anterior), o mediante código JavaScript y elementos DOM.

En el siguiente ejemplo, creamos varios elementos nuevos. Estos elementos se pueden crear con text/HTML, jQuery o JavaScript/DOM. Luego usamos el método append() para agregar estos nuevos elementos al texto (también funciona con prepend()):

Ejemplo

function appendText(){ var txt1="<p>Texto-1.</p>"; //Crear texto usando etiquetas HTML var txt2=$("<p></p>").text("Texto-2."); //Crear texto usando jQuery var txt3=document.createElement("p"); txt3.innerHTML="Texto-3."; //Crear texto usando DOM text with DOM $("body").append(txt1,txt2,txt3); //Agregar nuevos elementos }

Pruébalo »

Métodos jQuery after() y before()

El método jQuery after() inserta contenido después del elemento seleccionado.

El método jQuery before() inserta contenido antes del elemento seleccionado.

Ejemplo

$("img").after("Agregar texto después"); $("img").before("Agregar texto antes");

Pruébalo »

Agregar varios elementos nuevos con los métodos after() y before()

Los métodos after() y before() pueden recibir una cantidad ilimitada de nuevos elementos mediante parámetros. Los nuevos elementos se pueden crear con text/HTML, jQuery o JavaScript/DOM.

En el siguiente ejemplo, creamos varios elementos nuevos. Estos elementos se pueden crear con text/HTML, jQuery o JavaScript/DOM. Luego usamos el método after() para insertar estos nuevos elementos en el texto (también funciona con before()):

Ejemplo

function afterText() { var txt1="<b>I </b>"; //Crear elemento usando HTML var txt2=$("<i></i>").text("love "); //Crear elemento usando jQuery var txt3=document.createElement("big"); //Crear elemento usando DOM txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); //Agregar texto después de la imagen }

Pruébalo »
Otras extensiones