Método append
O método append adiciona texto ao final
de um elemento. Também existe o método
appendTo,
que funciona de maneira semelhante.
Sintaxe
Inserir texto no final de um elemento:
$(seletor).append(texto);
É possível adicionar ao final dos elementos selecionados um texto que será retornado por uma função personalizada. A função é chamada separadamente para cada um dos elementos selecionados. Ao ser chamada, são passados os seguintes parâmetros: a posição do elemento no conjunto, o conteúdo atual do elemento:
$(seletor).append(function(posição no conjunto, conteúdo atual do elemento));
O conteúdo também pode ser não apenas texto simples, mas também um elemento DOM ou um objeto jQuery. Nesse caso, esses elementos serão movidos de sua posição no código HTML.
Exemplo
Vamos inserir texto no final de um parágrafo determinado:
<p id="test">texto</p>
$('#test').append('!!!');
O código HTML ficará assim:
<p id="test">texto!!!</p>
Exemplo
Vamos inserir texto com tags no final de um parágrafo determinado:
<p id="test">texto</p>
$('#test').append('<b>!!!</b>');
O código HTML ficará assim:
<p id="test">texto<b>!!!</b></p>
Exemplo
Vamos encontrar todos os parágrafos e colocar no final de cada um deles a sua posição ordinal no conjunto:
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
$('p').append(function(índice, texto){return índice;});
O código HTML ficará assim:
<p>texto0</p>
<p>texto1</p>
<p>texto2</p>
<p>texto3</p>
<p>texto4</p>
