Agregar elementos con jQuery

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

Agregar nuevo contenido HTML

Vamos a aprender cuatro métodos de jQuery utilizados para agregar nuevo contenido:

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

Método append() de jQuery

El método append() de jQuery inserta contenido al final del elemento seleccionado.

Ejemplo

$("p").append("Texto insertado al final.");

Prueba por ti mismo

Método prepend() de jQuery

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

Ejemplo

$("p").prepend("Texto insertado al principio.");

Prueba por ti mismo

Añadir varios nuevos elementos mediante append() y prepend()

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

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

En el siguiente ejemplo, creamos varios nuevos elementos. Estos elementos pueden ser creados mediante text/HTML, jQuery o JavaScript/DOM. Luego, mediante el método append(), agregamos estos nuevos elementos al texto (también es válido para prepend()):

Ejemplo

function appendText()
{
var txt1="<p>Texto.</p>";               // Crear un nuevo elemento con HTML
var txt2=$("<p></p>").text("Texto.");   // Crear un nuevo elemento con jQuery
var txt3=document.createElement("p");  // Crear nuevos elementos a través de DOM
txt3.innerHTML="Texto.";
$("p").append(txt1,txt2,txt3);         // Añadir nuevos elementos
{}

Prueba por ti mismo

Métodos after() y before() de jQuery

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

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

Ejemplo

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

Prueba por ti mismo

Agregar varios nuevos elementos mediante after() y before()

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

En el siguiente ejemplo, creamos varios nuevos elementos. Estos elementos se pueden crear a través de text/HTML, jQuery o JavaScript/DOM. Luego insertamos estos nuevos elementos en el texto utilizando el método after() (también es válido para before()):

Ejemplo

function afterText()
{
var txt1="<b>I </b>";                    // Crear nuevos elementos con HTML
var txt2=$("<i></i>").text("amor ");     // Crear nuevos elementos a través de jQuery
var txt3=document.createElement("big");  // Crear nuevos elementos a través de DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Insertar nuevos elementos después de img
{}

Prueba por ti mismo

Manual de referencia de jQuery HTML

Para obtener información completa sobre los métodos HTML de jQuery, consulte el siguiente manual de referencia: