web-dev-qa-db-fra.com

Quelle est la différence entre jQuery: text () et html ()?

Quelle est la différence entre les fonctions text () et html () dans jQuery?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

contre

$("#div").text('<a href="example.html">Link</a><b>hello</b>');
jquerydom
255
Brettk

Je pense que la différence est presque explicite. Et c'est super trivial à tester.

jQuery.html() traite la chaîne au format HTML, jQuery.text() traite le contenu en tant que texte

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

Une différence qui peut ne pas être aussi évidente est décrite dans la documentation de l'API jQuery

Dans la documentation pour .html () :

La méthode .html() n'est pas disponible dans les documents XML.

Et dans la documentation pour .text () :

Contrairement à la méthode .html(), .text() peut être utilisé à la fois dans les documents XML et HTML.

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
Démo en direct sur http://jsfiddle.net/hossain/sUTVg/

335
Peter Bailey

((merci de mettre à jour si nécessaire, cette réponse est un wiki)

Sous-question: quand il n'y a que du texte, qu'est-ce qui est plus rapide, .text() ou .html()?

Réponse:.html() est plus rapide! Voir ici un "kit de test de comportement" pour toute la question .

Donc, en conclusion, si vous avez "seulement un texte", utilisez la méthode html(). 

Note: n'a pas de sens? N'oubliez pas que la fonction .html() est uniquement un wrapper pour .innerHTML, mais dans la fonction .text(), jQuery ajoute un "filtre d'entité", et ce filtre consomme naturellement du temps.

Ok, si vous voulez vraiment la performance ... Utilisez du Javascript pur pour accéder à du texte direct, remplacez-le par la propriété nodeValue . Conclusions du benchmark: 

  • .html() de jQuery est environ 2x plus rapide que .text().
  • le code .innerHTML pur de JS est environ 3 fois plus rapide que .html().
  • le code .nodeValue pur de JS est environ 50 fois plus rapide que .html(), ~ 100x que .text() et ~ 20x que .innerHTML.

PS: La propriété .textContent a été introduite avec DOM-Level-3, .nodeValue est DOM-Level-2 et est plus rapide (!).

Voir ce repère complet :

// 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());
104
Peter Krauss

Le premier exemple incorporera effectivement le code HTML dans la variable div, tandis que le deuxième exemple échappera au texte en remplaçant les caractères liés à l'élément par les entités caractères correspondantes de sorte qu'il s'affiche littéralement (le code HTML sera donc affiché non rendu).

64
Andrew Hare

La méthode text() entité-échappe à tout code HTML qui y est passé. Utilisez text() lorsque vous souhaitez insérer du code HTML visible par les personnes qui visualisent la page.

Techniquement, votre deuxième exemple produit:

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

qui serait rendu dans le navigateur comme:

<a href="example.html">Link</a><b>hello</b>

Votre premier exemple sera rendu sous forme de lien et de texte en gras.

54
davidcl

En fait, les deux ressemblent un peu, mais ils sont assez différents, cela dépend de votre utilisation ou de l'intention que vous souhaitez atteindre.

Où utiliser:

  • utilisez .html() pour opérer sur des conteneurs comportant des éléments HTML.
  • utilisez .text() pour modifier le texte des éléments ayant généralement des balises d'ouverture et de fermeture distinctes.

Où ne pas utiliser:

  • La méthode .text() ne peut pas être utilisée sur des entrées de formulaire ou des scripts.

    • .val() pour les éléments input ou textarea.
    • .html() comme valeur d'un élément de script.

  • Récupérer le contenu HTML de .text() convertira les balises HTML en entités HTML.

Différence:

  • .text() peut être utilisé dans les documents XML et HTML.
  • .html() est uniquement pour les documents html.

Consultez cet exemple sur jsfiddle pour voir les différences d’action

Exemple

26
Owais Qureshi

Étrange que personne n'ait mentionné les avantages de la fonction .text() sur .html() en matière de script inter-sites (bien que d'autres viennent de mentionner que .text() efface les données).

Il est toujours recommandé d'utiliser .text() lorsque vous souhaitez mettre à jour des données dans DOM, qui ne sont que des données/du texte que l'utilisateur peut voir.

.html() devrait être principalement utilisé pour obtenir le contenu HTML dans une div.

9
Deb

Utilisez .text (…) lorsque vous souhaitez afficher la valeur sous forme de texte simple.

Utilisez .html (…) lorsque vous souhaitez afficher la valeur sous forme de texte au format HTML (ou contenu HTML).

Vous devez absolument utiliser .text (...) lorsque vous n’êtes pas sûr que votre texte (par exemple, provenant d’un contrôle de saisie) ne contient pas de caractères/balises ayant une signification particulière en HTML. Ceci est vraiment important car cela pourrait entraîner un affichage incorrect du texte mais aussi/ l'activation d'un extrait de script JS indésirable (provenant par exemple d'une autre entrée utilisateur) .

5
Adorjan Princz

Fondamentalement, $ ("# div"). Html utilise element.innerHTML pour définir le contenu et $ ("# div"). Text (probablement) utilise 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).
2
Seth

Bien en terme simple.

html () - pour obtenir le code HTML interne (balises HTML et texte).

text () - pour obtenir uniquement du texte s'il est présent à l'intérieur (uniquement du texte) 

2
Must Keem J

$ ('. div'). html (val) définira les valeurs HTML de tous les éléments sélectionnés, $ ('. div'). text (val) définira les valeurs de texte de tous les éléments sélectionnés éléments.

Documents API pour jQuery.text ()

Documentation API pour jQuery.html ()

Je suppose qu'ils correspondent à Node # textContent et Element # innerHTML , respectivement. (Références DOM Gecko).

1
Michiel Kalkman

.text() vous donnera le texte réel entre les balises HTML. Par exemple, le texte du paragraphe entre les balises p. Ce qui est intéressant à noter est que cela vous donnera tout le texte de l’élément que vous ciblez avec votre sélecteur $ ainsi que tout le texte des éléments enfants de cet élément sélectionné. Donc, si vous avez plusieurs balises p avec du texte à l'intérieur de l'élément body et que vous faites une $(body).text(), vous obtiendrez all le texte de tous les paragraphes. (Texte uniquement, pas les balises p elles-mêmes.)

.html() vous donnera le texte et les balises. Donc, $(body).html() vous donnera votre page HTML entière

.val() fonctionne pour les éléments ayant un attribut value, tel que input. Une input ne contient pas de texte ni HTML et donc .text() et .html() seront tous deux null pour input éléments.

1
Fabian Madurai

Je pense que la différence consiste à insérer la balise HTML Dans text() vous balise HTML ne fonctionne pas 

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

sortie: 

You are registered <br> Mister name sourname

remplacement de text() par html()

sortie 

You are registered
Mister name sourname

alors la balise <br> fonctionne dans html()

0
david

fonction de texte définir ou récupérer la valeur sous forme de texte brut, sinon, fonction HTML définir ou récupérer la valeur sous forme de balises HTML pour modifier ou modifier celle-ci . Si vous souhaitez uniquement modifier le contenu, utilisez text (). Mais si vous avez besoin de changer le balisage, vous devez utiliser hmtl ().

C'est une réponse factice pour moi après six ans.

0
Minhaz

Le différent est .html() évaluer en tant que html, .text() avaluate en tant que texte. 
Considérons un bloc de HTML 
HTML

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

JS

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

L'illustration provient de ce lien http://api.jquery.com/text/

0
Pascal Tovohery