0

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>

1 Resposta 1

1

Exemplificando com o seu Código.

DOM :

<text class='car'>
    Oi, este é meu carro amarelo: <i class='fa fa-car' style='color:yellow;background-color:green;'></i>
  </text>

HTML JQUERY :

$('.car').html('NOVO HTML');

RESULTADO :

<text class="car">NOVO HTML</text>

REPLACEWITH JQUERY :

$('.car').replaceWith('NOVO HTML');

RESULTADO :

'NOVO HTML'

EXPLICANDO

  • .html

O método html() define ou retorna o conteúdo (innerHTML) dos elementos selecionados. Quando este método é usado para retornar conteúdo, ele retorna o conteúdo do PRIMEIRO elemento correspondente. Quando este método é usado para definir o conteúdo, ele substitui o conteúdo de TODOS os elementos correspondentes.


  • .replaceWith

O método replaceWith() substitui os elementos selecionados por um novo conteúdo, Coloquei alguns recursos do replaceWith no Código.


  • .text

O método text() define ou retorna o conteúdo de texto dos elementos selecionados.

Quando esse método é usado para retornar conteúdo, ele retorna o conteúdo de texto de todos os elementos correspondentes (a marcação HTML será removida).

Quando este método é usado para definir o conteúdo, ele substitui o conteúdo de TODOS os elementos correspondentes.


CONCLUSÃO

- HTML
1 - pode ser usado para obter o conteúdo de qualquer elemento.
2 - remove outras construções, como manipuladores de dados e eventos de elementos filhos antes de substituir esses elementos pelo novo conteúdo.
3 - Para definir o conteúdo de um elemento, que não contém HTML, use o .text()método e não .html().
4 - Utilização de Função

$( ".elemento1" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});


- REPLACE
1 - Remove o conteúdo do DOM e insere novo conteúdo em seu lugar com uma única chamada.
2 - Método remove todos os manipuladores de dados e eventos associados ao Elemento Removido.
3 - Um elemento também pode ser selecionado como substituto, Exemplo : $( ".elemento1" ).replaceWith( $( ".elemento2" ) );
4 - O replaceWith() na verdade não excluirá o elemento, mas simplesmente o removerá do DOM e o retornará para você na coleção.


- TEXT
1 - A Baixo nivel o text(), Chama o método DOM .createTextNode(), que não interpreta a string como HTML.
2 - Pode ser usado em documentos XML e HTml.
3 - método nos permite definir o conteúdo do texto passando uma função.

$( ".elemento1" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .