jQuery.append(): insertar elementos en el árbol DOM

El método jQuery.append() te permite si­m­pli­fi­car tareas complejas, como crear listas dinámicas, añadir elementos de fo­r­mu­la­rios o cargar contenido adicional mediante AJAX. En esta guía te vamos a mostrar la sintaxis de este método y cómo apro­ve­char­lo al máximo.

¿Qué es el método jQuery.append()?

jQuery.append() es una función de la librería jQuery que te permite insertar contenido di­ná­mi­ca­me­n­te en el árbol DOM (Document Object Model). Este método te permite añadir nuevos elementos o es­tru­c­tu­ras al final de un objeto es­pe­cí­fi­co. El método .append() de jQuery te ofrece muchas po­si­bi­li­da­des para ampliar di­ná­mi­ca­me­n­te tu árbol DOM y lo puedes utilizar en co­m­bi­na­ción con otras funciones de jQuery, como jQuery.re­mo­ve­Cla­ss() o jQuery.on(). También cabe destacar la perfecta in­te­gra­ción de jQuery en WordPress, que te permite realizar fu­n­cio­na­li­da­des es­pe­cia­les y elementos in­ter­ac­ti­vos en tu CMS.

Sintaxis y pa­rá­me­tros del método jQuery.append()?

La función JQuery.append() admite dos pa­rá­me­tros:

$(selector).append(content, function(index, html));

• content: re­pre­se­n­ta el contenido que se va a añadir
• function(index, html): se llama después de añadir el contenido
• index: el índice del elemento actual en la colección de objetos se­le­c­cio­na­dos
• html: el contenido HTML actual del elemento

El selector puede ser cualquier selector CSS válido para ide­n­ti­fi­car el elemento de destino deseado. Los se­le­c­to­res en jQuery son, por ejemplo, ID (#id), clases (.class) o nombres de elementos (por ejemplo div).

El content puede ser una cadena (texto), código HTML o un elemento DOM ya existente. Si in­tro­du­ces una cadena, se añadirá como contenido de texto al elemento. Si utilizas código HTML, se in­te­r­pre­ta e inserta como una nueva es­tru­c­tu­ra de elementos. Si ya tienes un elemento DOM, .append() lo incorpora al objeto de destino.

Ejemplos de uso de jQuery.append()

A co­n­ti­nua­ción, te mostramos algunos ejemplos que ilustran cómo utilizar el método .append() en jQuery.

jQuery.append() con HTML

El siguiente ejemplo muestra cómo añadir es­tru­c­tu­ras HTML:

$("header").append("<div><p>Nuevo contenido</p></div>");

jQuery.append() div inserta un co­n­te­ne­dor con un párrafo al final del elemento de cabecera.

jQuery.append() con elementos DOM

De forma similar, puedes añadir elementos DOM:

var newElement = $("<div><p>Nuevo contenido</p></div>");
$("header").append(newElement);

jQuery.append() con una función callback

Al utilizar una función callback, puedes realizar acciones después de agregar el contenido o acceder al nuevo elemento creado y sus pro­pie­da­des. Por ejemplo:

$("div#container").append("<p>Primer elemento</p><p>Segundo elemento</p><p>Tercer elemento</p>", function(index, html) {
    console.log("Elemento añadido: " + html);
    console.log("Índice del elemento: " + index);
});

La respuesta que se obtiene en la consola es la siguiente:

Elemento añadido: <p>Primer elemento</p>
Índice del elemento: 0
Elemento añadido: <p>Segundo elemento</p>
Índice del elemento: 1
Elemento añadido: <p>Tercer elemento</p>
Índice del elemento: 2

En este ejemplo, el elemento jQuery.append() añade tres etiquetas <p> (“Primer elemento”, “Segundo elemento” y “Tercer elemento”) al final del div con el ID container. La función callback se ejecuta para cada objeto añadido y muestra el contenido HTML del elemento y su índice co­rre­s­po­n­die­n­te en la consola.