Qual é a diferença entre jQuery: text () e html ()?

Qual a diferença entre text () e html () funciona em jQuery?

$("#div").html('Linkhello'); 

vs

 $("#div").text('Linkhello'); 

Eu acho que a diferença é quase autoexplicativa. E é super trivial testar.

jQuery.html() trata a string como HTML, jQuery.text() trata o conteúdo como texto

   Test Page     
 $(function() { $("#div1").html('Linkhello'); $("#div2").text('Linkhello'); }); 
  

((por favor atualize se necessário, esta resposta é uma Wiki))

.text() : quando apenas texto, o que é mais rápido, .text() ou .html() ?

Resposta: .html() é mais rápido! Veja aqui um “kit de teste de comportamento” para toda a questão .

Então, em conclusão, se você tiver “apenas um texto”, use o método html() .

Nota: não faz sentido? Lembre-se de que a function .html() é apenas um wrapper para .innerHTML , mas na function .text() jQuery adiciona um “filtro de entidade” e esse filtro consome naturalmente tempo.


Ok, se você realmente quer desempenhoUse JavaScript puro para acessar a substituição direta de texto pela propriedade nodeValue . Conclusões de referência:

  • O .html() jQuery é ~ 2x mais rápido que .text() .
  • O JS ‘ .innerHTML puro é ~ 3x mais rápido que o .html() .
  • O JS ‘ .nodeValue puro é ~ 50x mais rápido que .html() , ~ 100x que .text() e ~ 20x que .innerHTML .

PS: .textContent propriedade .textContent foi introduzida com o DOM-Level-3, o .nodeValue é DOM-Level-2 e é mais rápido (!).

Veja este benchmark completo :

 // Using jQuery: simplecron.restart(); for (var i=1; i<3000; i++) $("#work").html('BENCHMARK WORK'); var ht = simplecron.duration(); simplecron.restart(); for (var i=1; i<3000; i++) $("#work").text('BENCHMARK WORK'); alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration()); // Using pure JavaScript only: simplecron.restart(); for (var i=1; i<3000; i++) document.getElementById('work').innerHTML = 'BENCHMARK WORK'; ht = simplecron.duration(); simplecron.restart(); for (var i=1; i<3000; i++) document.getElementById('work').nodeValue = 'BENCHMARK WORK'; alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration()); 

O primeiro exemplo irá realmente incorporar HTML dentro do div enquanto o segundo exemplo irá escaping do texto por meio da substituição de caracteres relacionados a elementos com suas entidades de caracteres correspondentes para que sejam exibidos literalmente (ou seja, o HTML será exibido e não renderizado).

O método text() entidade-escapa qualquer HTML que é passado para ele. Use text() quando quiser inserir o código HTML que ficará visível para as pessoas que visualizarem a página.

Tecnicamente, seu segundo exemplo produz:

 <a href="https://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html/example.html">Link</a><b>hello</b> 

que seria processado no navegador como:

 Linkhello 

Seu primeiro exemplo será renderizado como um link real e algum texto em negrito.

Na verdade, ambos parecem um pouco semelhantes, mas são bem diferentes, dependendo do seu uso ou intenção, o que você quer alcançar,

Onde usar:

  • use .html() para operar em contêineres com elementos html.
  • use .text() para modificar o texto de elementos que normalmente possuem tags de abertura e fechamento separadas

Onde não usar:

  • .text() método .text() não pode ser usado em inputs ou scripts de formulário.

    • .val() para elementos de input ou textarea.
    • .html() para o valor de um elemento de script.
  • Pegando conteúdo html de .text() irá converter as tags html em entidades html.

Diferença:

  • .text() pode ser usado em documentos XML e HTML.
  • .html() é apenas para documentos em HTML.

Verifique este exemplo no jsfiddle para ver as diferenças na ação

Exemplo

Estranho que ninguém mencionou o benefício de prevenção de script Cross Site de .text() sobre .html() (Embora outros tenham acabado de mencionar que .text() escapa dos dados).

É sempre recomendado usar .text() quando você quiser atualizar dados no DOM que são apenas dados / texto para o usuário ver.

.html() deve ser usado principalmente para obter o conteúdo HTML dentro de um div.

Use .text (…) quando você pretende exibir o valor como um texto simples.

Use .html (…) quando você pretende exibir o valor como um texto formatado em html (ou conteúdo HTML).

Você deve definitivamente usar .text (…) quando não tiver certeza de que seu texto (por exemplo, vindo de um controle de input) não contenha caracteres / tags que tenham um significado especial em HTML. Isso é realmente importante porque isso pode fazer com que o texto não seja exibido corretamente, mas também pode fazer com que um snippet de script JS indesejado (por exemplo, proveniente de outra input do usuário) seja ativado .

Basicamente, $ (“# div”). Html usa element.innerHTML para definir o conteúdo e $ (“# div”). Text (provavelmente) usa element.textContent.

http://docs.jquery.com/Attributes/html :

 Set the html contents of every matched element 

http://docs.jquery.com/Attributes/text :

 Similar to html(), but escapes HTML (replace "< " and ">" with their HTML entities). 

$ (‘. div’). html (val) irá definir os valores HTML de todos os elementos selecionados, $ (‘. div’). text (val) irá definir os valores de texto de todos os elementos selecionados.

Documentos da API para jQuery.text ()

Documentos da API para jQuery.html ()

Eu acho que eles correspondem a Node # textContent e Element # innerHTML , respectivamente. (Referências do Gecko DOM).

Bem, em termos simples.

html () – para obter o html interno (tags e texto html).

text () – para obter somente texto se presente dentro (somente texto)

Eu acho que a diferença é inserir tag html no text() você tag html não funciona

 $('#output').html('You are registered'+'
' +' ' + 'Mister'+' ' + name+' ' + sourname ); }

saída:

 You are registered 
Mister name sourname

substituindo text() por html()

saída

 You are registered Mister name sourname 

então a tag
funciona em html()

conjunto de funções de texto ou recuperar o valor como texto simples, caso contrário, a function HTML definir ou recuperar o valor como marcas HTML para alterar ou modificar isso. Se você quiser apenas alterar o conteúdo, use text (). Mas se você precisar alterar a marcação, precisará usar o hmtl ().

É uma resposta fictícia para mim depois de seis anos, não se importe.