# 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)](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/presentacion-de-document-object-model-dom/)**. 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()](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/jquery-removeclass/) o [jQuery.on()](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/jquery-on/). También cabe destacar la perfecta integración de [jQuery en WordPress](https://www.ionos.es/digitalguide/hosting/blogs/wordpress-jquery/), que te permite realizar funcionalidades especiales y elementos interactivos en tu CMS.

Consejo ¿Estás pensando en crear tu propia página web? IONOS te ofrece la solución perfecta para ti, con [hosting con espacio ilimitado](https://www.ionos.es/alojamiento/espacio-web "Espacio web con IONOS"), tarifas asequibles y una amplia variedad de funciones diseñadas para satisfacer tus necesidades personales. Empieza ahora y despliega tu página web con éxito en Internet.

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

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

```jQuery
$(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.

Consejo Aprovecha todo el potencial de tus servicios de IONOS con la [API de IONOS](https://developer.hosting.ionos.es "API de IONOS para desarrolladores"). Su integración es sencilla, escalable y te brinda opciones de automatización que optimizan el uso de tus recursos. Descubre las numerosas ventajas y potencia al máximo tu presencia online con la API de IONOS.

## Ejemplos de uso de jQuery.append()

A continuación, te mostramos algunos ejemplos que ilustran cómo utilizar el método .append() en jQuery.

Consejo Si quieres fortalecer tus **conocimientos básicos de jQuery**, te recomendamos consultar nuestro [tutorial de jQuery](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/jquery-tutorial-de-integracion-y-primeros-pasos/). En él encontrarás información detallada y una guía práctica para mejorar tus conocimientos de jQuery y crear páginas web atractivas.

### jQuery.append() con HTML

El siguiente ejemplo muestra cómo añadir **estructuras HTML**:

```jQuery
$("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**:

```jQuery
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:

```jQuery
$("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:

```jQuery
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**.

Consejo Optimiza el despliegue de tu aplicación web con [Deploy Now](https://www.ionos.es/alojamiento/deploy-now "Despliegues automáticos con IONOS") de IONOS. Deploy Now es una herramienta robusta que automatiza la configuración de todos los recursos que necesitas, incluyendo servidores, bases de datos y dominios. Esto te permite ahorrar tiempo valioso que puedes dedicar al desarrollo propiamente dicho.


This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/jquery-append/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/jquery-append/) for AI/LLM consumption.