¿Cuál es la diferencia entre jQuery: text () y html ()?

¿Cuál es la diferencia entre text () y html () en jQuery?

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

vs

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

Creo que la diferencia es casi autoexplicativa. Y es súper trivial probarlo.

jQuery.html() trata la cadena como HTML, jQuery.text() trata el contenido como texto

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

((por favor actualice si es necesario, esta respuesta es una Wiki))

.text() : cuando solo texto, ¿qué es más rápido, .text() o .html() ?

Respuesta: .html() es más rápido! Vea aquí un “kit de prueba de comportamiento” para toda la pregunta .

Entonces, en conclusión, si tiene “solo un texto”, use el método html() .

Nota: ¿No tiene sentido? Recuerde que la función .html() es solo un contenedor para .innerHTML , pero en la función .text() jQuery agrega un “filtro de entidad” , y este filtro, naturalmente, consume tiempo.


Ok, si realmente quieres rendimientoUsa JavaScript puro para acceder a texto directo-reemplaza por la propiedad nodeValue . Conclusiones de referencia:

  • jQuery’s .html() es ~ 2 .text() más rápido que .text() .
  • JS puro .innerHTML es ~ 3 veces más rápido que .html() .
  • pure JS ‘ .nodeValue es ~ 50x más rápido que .html() , ~ 100x que .text() y ~ 20x que .innerHTML .

PD: la propiedad .textContent se introdujo con DOM-Level-3, .nodeValue es DOM-Level-2 y es más rápido (!).

Vea este punto de referencia 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()); 

El primer ejemplo realmente incluirá HTML dentro del div mientras que el segundo ejemplo escapará al texto reemplazando los caracteres relacionados con los elementos con sus entidades de caracteres correspondientes para que se muestre literalmente (es decir, el HTML se mostrará no representado).

La entidad de método text() escapa de cualquier HTML que se pase a él. Use text() cuando desee insertar código HTML que será visible para las personas que ven la página.

Técnicamente, su segundo ejemplo produce:

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

que se representaría en el navegador como:

 Linkhello 

Su primer ejemplo se representará como un enlace real y texto en negrita.

En realidad ambos se parecen un poco, pero son bastante diferentes, depende de tu uso o intención, lo que quieres lograr,

Dónde utilizar:

  • use .html() para operar en contenedores que tengan elementos html.
  • use .text() para modificar el texto de los elementos que generalmente tienen tags de apertura y cierre separadas

Donde no usar:

  • .text() método .text() no se puede usar en entradas de formularios o scripts.

    • .val() para elementos de entrada o de área de texto.
    • .html() para el valor de un elemento de script.
  • La selección del contenido html de .text() convertirá las tags html en entidades html.

Diferencia:

  • .text() se puede usar tanto en documentos XML como HTML.
  • .html() es solo para documentos html.

Verifique este ejemplo en jsfiddle para ver las diferencias en acción

Ejemplo

Es extraño que nadie haya mencionado el beneficio de prevención de scripts Cross Site de .text() sobre .html() (Aunque otros han mencionado que .text() escapa de los datos).

Siempre se recomienda utilizar .text() cuando desee actualizar los datos en DOM, que son solo datos / texto que el usuario puede ver.

.html() debería usarse principalmente para obtener el contenido HTML dentro de un div.

Use .text (…) cuando tenga la intención de mostrar el valor como un texto simple.

Use .html (…) cuando tenga la intención de mostrar el valor como texto con formato html (o contenido HTML).

Definitivamente debe usar .text (…) cuando no esté seguro de que su texto (por ejemplo, proveniente de un control de entrada) no contenga caracteres / tags que tengan un significado especial en HTML. Esto es realmente importante porque esto podría provocar que el texto no se muestre correctamente, pero también podría provocar la activación de un fragmento de script de JS no deseado (por ejemplo, procedente de otra entrada de usuario) .

Básicamente, $ (“# div”). Html utiliza element.innerHTML para establecer los contenidos, y $ (“# div”). Text (probablemente) 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) configurará los valores HTML de todos los elementos seleccionados, $ (‘. div’). text (val) establecerá los valores de texto de todos los elementos seleccionados.

Documentos API para jQuery.text ()

Documentos de API para jQuery.html ()

Supongo que corresponden a Node # textContent y Element # innerHTML , respectivamente. (Gecko DOM references).

Bien en un término simple.

html () – para obtener html interno (tags html y texto).

text () – para obtener solo texto si está presente en el interior (solo texto)

Creo que la diferencia es insertar una etiqueta html en text() tu etiqueta html no funciona

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

salida:

 You are registered 
Mister name sourname

reemplazando text() con html()

salida

 You are registered Mister name sourname 

entonces la etiqueta
funciona en html()

función de texto establecer o recuperar el valor como texto sin formato, de lo contrario, la función HTML establecer o recuperar el valor como tags HTML para cambiar o modificar eso. Si solo quieres cambiar el contenido, utiliza el texto (). Pero si necesita cambiar el marcado, entonces debe usar hmtl ().

Es una respuesta tonta para mí después de seis años, no me importa.