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

El método jQuery.append() te permite simplificar tareas complejas, como crear listas dinámicas, añadir elementos de formularios o cargar contenido adicional mediante AJAX. En esta guía te vamos a mostrar la sintaxis de este método y cómo aprovecharlo 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 dinámicamente en el árbol DOM (Document Object Model). Este método te permite añadir nuevos elementos o estructuras al final de un objeto específico. El método .append() de jQuery te ofrece muchas posibilidades para ampliar dinámicamente tu árbol DOM y lo puedes utilizar en combinación con otras funciones de jQuery, como jQuery.removeClass() o jQuery.on(). También cabe destacar la perfecta integración de jQuery en WordPress, que te permite realizar funcionalidades especiales y elementos interactivos en tu CMS.

Sintaxis y parámetros del método jQuery.append()?

La función JQuery.append() admite dos parámetros:

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

• content: representa 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 seleccionados
• html: el contenido HTML actual del elemento

El selector puede ser cualquier selector CSS válido para identificar el elemento de destino deseado. Los selectores 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 introduces una cadena, se añadirá como contenido de texto al elemento. Si utilizas código HTML, se interpreta e inserta como una nueva estructura de elementos. Si ya tienes un elemento DOM, .append() lo incorpora al objeto de destino.

Ejemplos de uso de jQuery.append()

A continuació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 estructuras HTML:

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

jQuery.append() div inserta un contenedor 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 propiedades. 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 correspondiente en la consola.