Quelle est la différence entre innerHTML et html() dans jquery ?

Différences : 1. html() peut définir des balises en lecture seule telles que tbody et tr, mais innerHTML ne fonctionne pas dans les versions inférieures d'IE et ne peut pas être attribuée. Si une valeur est attribuée, le script le signalera. une erreur ; 2. Le script défini par html() Le script sera exécuté, mais le script défini par innerHTML ne sera pas exécuté.

Tutoriel recommandé : Tutoriel vidéo jquery

Différences InnerHtml() et html()

1. html() peut définir des balises en lecture seule telles que tbody et tr, mais innerHTML ne peut pas être utilisé dans les versions inférieures d'IE

dans un Dans les documents HTML, on peut utiliser la méthode .html() pour obtenir le contenu de n'importe quel élément. Si le sélecteur correspond à plusieurs éléments, seul le contenu HTML du premier élément correspondant sera récupéré.

innerHTML est l'intégralité du contenu de la position de départ à la position de fin de l'objet, y compris la balise Html

Au départ, je pensais qu'innerHTML et le html dans jquery étaient en fait exactement les mêmes, et jquery était superflu, jusqu'à ce que je rencontre un problème

Regardez un exemple :

var tbody=document.createElement('tbody');
tbody.innerHTML=&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;; //在IE下报错，目标对象错误

Essayez maintenant d'utiliser le code HTML de jquery,

$(tbody).html(&#39;<tr><td>IE下tbody的innerHTML是只读的</td></tr>&#39;);

J'ai trouvé que jquery peut être affiché correctement sous IE, non. Des questions.

Après avoir vérifié les informations, j'ai découvert :

le html() de jQuery a effectué un traitement de tolérance aux pannes. Certains éléments de l'API native Dom innerHTML ne sont pas pris en charge, comme la table tr et. les autres éléments et les corps sous IE InnerHTML tels que , tr et ainsi de suite sont en lecture seule et ne permettent pas l'écriture, mais il n'y a aucun problème dans les autres navigateurs.

Jquery utilise try et catch pour détecter. Si une erreur est signalée, this.empty().append(value) est à nouveau appelée dans catch et les chaînes sont ajoutées via append.

Le innerHTML de certains éléments dans IE est en lecture seule :

Dans IE6, IE7, IE8, IE9 col, colGroup, frameSet, html, head, style,table, tBody, tFoot Les attributs innerHTML de , tHead, title, tr sont en lecture seule et ne peuvent pas être attribués. S'ils sont attribués, le script signalera une erreur. Dans IE10, le innerHTML de ces balises a été modifié pour être accessible en écriture.

Étant donné que les attributs innerHTML de ces balises sont en lecture seule dans IE6-IE9, nous essayons d'éviter d'attribuer des valeurs aux attributs innerHTML de ces balises. Par exemple, le innerHTML de table peut être remplacé par le. élément parent de la table (en supposant qu'il s'agisse de l'affectation d'attribut innerHTML de p).

2. Le script défini par html() sera exécuté, mais le script défini par innerHTML ne sera pas exécuté.

Parce que jQuery forcera la balise de script dans la chaîne de paramètres à prendre effet (en créant et en remplaçant), mais pas l'affectation .innerHTML.

$(&#39;#app&#39;).html(&#39;<script>alert(1)</script>&#39;)  // 会弹出警告框
$(&#39;#app&#39;)[0].innerHTML = &#39;<script>alert(1)</script>&#39; // 不会弹出警告框
      // ↑使用[0]将jquery对象转为dom对象，只有dom对象才有innerHTML方法，jQuery没有。

Informations étendues :

Avantages de la fonction html()

Regardez les lacunes de l'attribut innerHTML et vous connaîtrez les avantages de la fonction html() dans jQuery L'avantage est qu'elle est compatible avec tous les navigateurs. Il n'y a aucun problème que les balises HTML5 ne soient pas supportées, il n'y a aucun problème que les attributs href et src soient convertis, et il n'y a aucun problème que certaines balises. Je ne peux pas définir de chaînes HTML. En bref, en une phrase, c'est fondamentalement sans souci, du moins en termes de fonctionnalité.

Inconvénients de la fonction html()

Il semble que la fonction html() de jQuery semble être infiniment parfaite, mais en fait ce n'est pas le cas. Sa perfection ne fait que refléter. sa fonction. Il est compatible avec tous les navigateurs, y compris IE. Mais il se trouve que c'est IE. Bien qu'il soit compatible, les performances ne sont pas optimistes. Si vous utilisez la fonction html() pour définir une grande quantité de chaîne html, ce sera un désastre.

Quelle est la performance de la fonction html() sous IE ? La configuration de l'ordinateur est "i5 quad-core, 8G de mémoire, IE9". J'ai testé en utilisant la fonction html() pour définir un tableau avec 2000 lignes et 4 colonnes, et la consommation de temps moyenne a atteint 27 secondes ! Quelle est la raison spécifique pour laquelle html() est si lent sous IE ? J'ai brièvement lu le code source et je pense que l'utilisation de la méthode try est l'une des principales raisons pour lesquelles les étudiants intéressés peuvent l'étudier en profondeur.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!