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

Question

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

vs

Answer 1

Je pense que la différence est presque explicite. Et c’est super simple pour tester

traite la chaîne comme HTML, traite le contenu sous forme de texte.

Answer 2

((veuillez mettre à jour si nécessaire, cette réponse est un Wiki))

Sous-question: quand est-il uniquement du texte, ce qui est plus rapide, .text() ou .html()?

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

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

Remarque: Ne fait pas de sens? Rappelez-vous que l' .html() fonction n'est qu'un wrapper .innerHTML, mais dans l' .text() fonction jQuery ajoute une "entité filtre", et ce filtre naturellement consomme du temps.

---

Ok, si vous voulez vraiment de la performance... Utiliser Javascript pour accéder texte direct-remplacer par l' nodeValuede la propriété. Indice de référence des conclusions:

• jQuery .html() ~2x plus rapide que l' .text().
• pure JS' .innerHTML ~3x plus rapide que l' .html().
• pure JS' .nodeValue ~50x plus rapide que l' .html(), ~100x qu' .text(), et ~20x qu' .innerHTML.

PS: t.extContent de la propriété a été introduit avec DOM-Niveau-3, .nodeValue est DOM-Niveau-2 et est plus rapide (!).

Voir ce benchmark 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());

Answer 3

Le premier exemple intégrera réellement HTML au sein de la `` alors que le deuxième exemple s’échappera le texte au moyen de remplacement axés sur l’élément caractères avec leurs correspondants des entités de caractères afin qu’elle affiche littéralement (c'est-à-dire le code HTML sera affiche ne pas rendus).

Answer 4

La méthode entité n’échappe pas les éléments HTML qui est passé dedans. Utilisation lorsque vous voulez insérer du code HTML qui sera visible par les personnes affichant la page.

Techniquement, votre second exemple génère :

qui devrait être rendu dans le navigateur comme :

Votre premier exemple sera restituée sous un lien réel et du texte en gras.

Answer 5

En fait, les deux ne ressembler à quelque chose de similaire, mais sont tout à fait différents, cela dépend de votre utilisation ou de l'intention de ce que vous voulez atteindre ,

Où l'utiliser:

• utiliser .html() d'opérer sur les récipients ayant des éléments html.
• utiliser .text() pour modifier le texte des éléments habituellement distinctes, d'ouvrir et de les balises de fermeture

Où ne pas utiliser:

• .text() méthode ne peut pas être utilisé sur les entrées d'un formulaire ou de scripts.

  • .val() pour l'entrée ou la textarea éléments.
  • .html() de la valeur d'un élément de script.

• Ramasser contenu html à partir d' .text() permettra de convertir les balises html en entités html.

Différence:

• .text() peut être utilisé à la fois en XML et des documents HTML.
• .html() est uniquement pour les documents html.

Cochez cette exemple sur jsfiddle pour voir les différences dans l'action

Exemple