# jQuery.append(): Como inserir elementos na árvore DOM

Com o **método jQuery.append()**, você simplifica tarefas complexas, como a criação de listas dinâmicas, a adição de elementos de formulário e o carregamento de conteúdos adicionais por AJAX. Conheça a sintaxe básica e aprenda a usar o jQuery.append().

## O que é jQuery.append()?

jQuery.append() é a função da biblioteca jQuery capaz de **inserir conteúdos dinamicamente na árvore DOM (Document Object Model)**. Ao aplicar o método, você consegue anexar novos elementos ou estruturas ao fim de um objeto. Versátil, o jQuery.append() pode ser usado em combinação com outras funções, como com [jQuery.removeClass()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/removeclass-jquery/) e [jQuery.on()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-on/). Assim, você tem uma série de opções para expandir, de forma dinâmica, a árvore DOM. Entre as suas vantagens também está a integração do [jQuery com o WordPress](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-jquery/ "WordPress e jQuery"), que possibilita a criação de funcionalidades especiais e de elementos interativos no CMS.

Dica Quer lançar o seu próprio site? A IONOS tem a solução ideal para você: um amplo [*webspace*](https://www.ionos.com/hosting/webspace "Webspace: Get your project online — IONOS") a um preço acessível e uma variedade de funções que atende as necessidades específicas do seu projeto. Escolha um plano agora mesmo e comece a sua empreitada de sucesso na internet.

## Sintaxe e parâmetros de jQuery.append()

O método jQuery.append() aceita **dois parâmetros**:

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

- ***content***: Especifica o conteúdo que será adicionado.
- ***function(index, html)***: Função executada após a anexação do conteúdo.
- ***index***: Índice do elemento atual no conjunto de objetos selecionados.
- ***html***: Conteúdo HTML atual do elemento.

Por sua vez, ***selector*** pode ser qualquer seleção CSS válida para identificar o elemento final desejado. Seletores em jQuery são, por exemplo, IDs (`#id`), classes (`.class`) ou nomes de elementos (como `div`).

O parâmetro ***content*** pode ser uma cadeia de caracteres (texto), um código HTML ou um elemento DOM já existente. Se você utilizar uma cadeia de caracteres, ela será adicionada como conteúdo de texto do elemento. Se você especificar um código HTML, ele será interpretado e inserido como uma nova estrutura de elemento. No caso de um elemento DOM já existente, o método jQuery.append() anexará esse elemento ao objeto final.

Dica Explore toda a gama de possibilidades dos serviços da IONOS com a [API da IONOS](https://developer.hosting.ionos.com "Developer API — IONOS"). De fácil integração, com escalabilidade e opções de automação, você poderá fazer uso dos recursos da IONOS com muito mais eficiência. Descubra os diversos benefícios da API da IONOS e maximize o seu potencial on-line.

## Exemplos de uso de jQuery.append()

Acompanhe alguns exemplos de aplicação do método jQuery.append().

Dica Se você quer aprimorar seus **conhecimentos de jQuery**, não deixe de acessar o nosso tutorial introdutório de jQuery. Lá, você encontra informações básicas e orientações práticas para aprofundar suas habilidades em jQuery e criar sites atrativos.

### jQuery.append() com HTML

O exemplo a seguir mostra como adicionar **estruturas HTML** com .append() jQuery:

```jQuery
$("header").append("<div><p>Novo conteúdo</p></div>");
```

Acima, o trecho **jQuery.append() div** insere um contêiner com um parágrafo no fim do elemento *header* (cabeçalho).

### jQuery.append() com elementos DOM

A adição de **elementos DOM** segue um esquema semelhante, como exemplifica o código abaixo:

```jQuery
var newElement = $("<div><p>Novo conteúdo</p></div>");
$("header").append(newElement);
```

### jQuery.append() com função callback

Ao aplicar uma **função *callback*** após a inserção de um conteúdo, você se torna capaz de executar certas ações ou acessar o elemento recém-criado e as respectivas propriedades:

```jQuery
$("div#container").append("<p>Primeiro elemento</p><p>Segundo elemento</p><p>Terceiro elemento</p>", function(index, html) {
    console.log("Elemento adicionado: " + html);
    console.log("Índice do elemento: " + index);
});
```

Assim ficaria o resultado:

```jQuery
Elemento adicionado: <p>Primeiro elemento</p>
Índice do elemento: 0
Elemento adicionado: <p>Segundo elemento</p>
Índice do elemento: 1
Elemento adicionado: <p>Terceiro elemento</p>
Índice do elemento: 2
```

No exemplo acima, a função **jQuery.append() element** anexa três tags `<p>` (*Primeiro elemento*, *Segundo elemento* e *Terceiro elemento*) simultaneamente ao fim do `div` com o ID `container`. A função `callback` é chamada para cada objeto adicionado e exibe, no **console**, o conteúdo HTML do respectivo elemento, assim como o índice correspondente.

Dica Otimize o processo de deployment da sua aplicação web com o [Deploy Now](https://www.ionos.com/hosting/deploy-now "Deploy Now — IONOS") da IONOS. Essa poderosa ferramenta automatiza a configuração de todos os recursos necessários, como de instâncias de servidor, bancos de dados e domínios. Assim, você não perde tempo com tecnicidades e pode se dedicar exclusivamente aos trabalhos de desenvolvimento.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-append/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-append/) for AI/LLM consumption.