Método html
O método html permite alterar o texto
de um elemento e obtê-lo junto com as tags.
Sintaxe
Obtendo o texto:
$(seletor).html();
Alterando o texto:
$(seletor).html(novo texto);
Informações Adicionais
O método html pode aplicar uma função
especificada a cada elemento no conjunto.
Neste caso, a função receberá como primeiro parâmetro
o índice do elemento no conjunto, e como segundo parâmetro
- o texto atual do elemento:
$(seletor).html(function(índice no conjunto, texto atual do elemento));
Os nomes das variáveis na função podem ser quaisquer.
Por exemplo, se para o primeiro parâmetro dermos o nome
index - então dentro da nossa função estará disponível
a variável index, que conterá o índice no
conjunto para aquele elemento que a função está processando
no momento. Da mesma forma, se para o segundo
parâmetro dermos, por exemplo, o nome value - então
dentro da nossa função estará disponível a variável value,
que conterá o texto daquele elemento que a função
está processando no momento:
$(seletor).html(function(index, value) {
// aqui as variáveis index e value estão disponíveis
});
O texto de cada elemento será alterado para aquele que a função retornar especificamente para este elemento.
Exemplo
Vamos exibir o conteúdo do nosso parágrafo:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Exemplo
Vamos alterar o conteúdo do nosso parágrafo:
<p id="test">text1</p>
$('#test').html('text2');
O código HTML ficará assim:
<p id="test">text2</p>
Exemplo
Vamos alterar o conteúdo do nosso parágrafo para texto com tags:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
O código HTML ficará assim:
<p id="test"><span>text2</span></p>
Exemplo
Vamos adicionar ao final de cada parágrafo o seu número de ordem no conjunto:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
O código HTML ficará assim:
<p>text 0</p>
<p>text 1</p>
<p>text 2</p>
