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() e 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, que possibilita a criação de funcionalidades especiais e de elementos interativos no CMS.

Sintaxe e parâmetros de jQuery.append()

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

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

Exemplos de uso de jQuery.append()

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

jQuery.append() com HTML

O exemplo a seguir mostra como adicionar estruturas HTML com .append() 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:

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:

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

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.