Métodos – HTML

Neste momento da aula, veremos os métodos da API do jQuery cuja finalidade é inserir, apagar ou modificar a estrutura HTML da página:

O exemplo a seguir mostra como utilizar cada uma das ações HTML apresentadas nesta seção. Este exemplo é composto de alguns elementos HTML, os quais, após pressionar o botão 'Teste', sofrerão modificações.

Código da página (arquivo acoesHtml.html):

Ao executar esse código no navegador, as páginas apresentadas nas Figuras 1 e 2 serão exibidas.

Observe que essa mesma função, quando invocada sem argumentos, ao invés de definir o valor do elemento, retorna o valor corrente dele. Para verificar, experimente substituir o código da linha 12 por:

1. As linhas 14 e 15 utilizam os métodos ‘before’ e ‘after’, respectivamente, para inserir texto antes e depois do campo texto.
2. As linhas 16 e 17 utilizam os métodos ‘prepend’ e ‘append’ para modificar o conteúdo interno do elemento cujo id é ‘d1’, adicionando, respectivamente, textos no início e no final do texto original.
3. A linha 18 utiliza o método ‘html’ para definir o conteúdo interno do elemento cujo id é ‘d2’.

Note que esse método, assim como o método ‘val’, quando utilizado sem argumentos, ao invés de definir o valor do elemento, retorna o valor corrente do mesmo. Nesse caso, retorna o conteúdo interno do elemento.