Eu tenho o seguinte elemento HTML
:
<text class='car'>
Oi, este é meu carro amarelo: <i class='fa fa-car' style='color:yellow;background-color:green;'></i>
</text>
E eu quero manipular o conteúdo dele através de jQuery
.
Primeiro, usei .html()
:
<script>
$(function() {
$('.car').html('<text class="car">Oi, este é meu carro vermelho: <i class="fa fa-car" style="color:red;background-color:green;"></i></text>');
});
</script>
E depois .replaceWith()
:
<script>
$(function() {
$('.car').replaceWith('<text class="car">Oi, este é meu carro vermelho: <i class="fa fa-car" style="color:red;background-color:green;"></i></text>');
});
</script>
E não teve diferença (não a olho nú, pelo menos).
Já o método .text()
não aceita a marcação HTML
(ex. <div>Oi</div>
), apenas modifica o conteúdo textual do elemento. Assim, não tem como colocar o ícone e não sei se o elemento é eliminado ficando apenas a string.
Então:
- Quais as principais diferenças entre
.html()
,.replaceWith()
e.text()
e quando será preferível usar uma a outra?
Ícones e jQuery
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>