web-dev-qa-db-fra.com

JQuery html () et innerHTML

Puis-je me fier entièrement à la méthode html() de jQuery se comportant de manière identique à innerHTML? Existe-t-il une différence entre innerHTML et la méthode html() de jQuery? Si ces deux méthodes fonctionnent de la même manière, puis-je utiliser la méthode html() de jQuery à la place de innerHTML?

Mon problème est le suivant: je travaille sur des pages déjà conçues, les pages contiennent des tables et en JavaScript, la propriété innerHTML est utilisée pour les remplir dynamiquement.

L'application fonctionne correctement sur Firefox mais Internet Explorer déclenche une erreur: unknown runtime exception. J'ai utilisé la méthode html() de jQuery et l'erreur de [~ # ~], c'est-à-dire [~ # ~] , a disparu. Mais je ne suis pas sûr que cela fonctionnera pour tous les navigateurs et je ne suis pas sûr de remplacer toutes les propriétés innerHTML par la méthode html() de jQuery.

Merci beaucoup.

javascriptjqueryhtmldominnerhtml
75
Bhupi

Pour répondre à ta question:

.html() appellera simplement .innerHTML après avoir effectué quelques vérifications pour nodeTypes et d'autres choses. Il utilise également un try/catchbloquez le bloc où il essaie d’utiliser innerHTML en premier et si cela échoue, il se repliera gracieusement sur le fichier jQuery .empty() + append()

105
jAndy

En ce qui concerne plus particulièrement "Puis-je compter entièrement sur la méthode jquery html () pour qu’elle se comporte comme innerHTML", ma réponse est NON!

Exécutez ceci dans Internet Explorer 7 ou 8 et vous verrez.

jQuery génère un code HTML incorrect lors de la définition de code HTML contenant une balise <FORM> imbriquée dans une balise <P> où le début de la chaîne est un retour à la ligne!

Il existe plusieurs cas de test ici et les commentaires lors de l'exécution doivent être suffisamment explicites. C'est assez obscur, mais ne pas comprendre ce qui se passe est un peu déconcertant. Je vais déposer un rapport de bogue.

<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   

        <script>
            $(function() {

                // the following two blocks of HTML are identical except the P tag is outside the form in the first case
                var html1 = "<p><form id='form1'><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></form></p>";
                var html2 = "<form id='form1'><p><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></p></form>";

                // <FORM> tag nested within <P>
                RunTest("<FORM> tag nested within <P> tag", html1);                 // succeeds in Internet Explorer    
                RunTest("<FORM> tag nested within <P> tag with leading newline", "\n" + html1);     // fails with added new line in Internet Explorer


                // <P> tag nested within <HTML>
                RunTest("<P> tag nested within <FORM> tag", html2);                 // succeeds in Internet Explorer
                RunTest("<P> tag nested within <FORM> tag with leading newline", "\n" + html2);     // succeeds in Internet Explorer even with \n

            });

            function RunTest(testName, html) {

                // run with jQuery
                $("#placeholder").html(html);
                var jqueryDOM = $('#placeholder').html();
                var jqueryFormSerialize = $("#placeholder form").serialize();

                // run with innerHTML
                $("#placeholder")[0].innerHTML = html;

                var innerHTMLDOM = $('#placeholder').html();
                var innerHTMLFormSerialize = $("#placeholder form").serialize();

                var expectedSerializedValue = "field1=111&field2=222";

                alert(  'TEST NAME: ' + testName + '\n\n' +
                    'The HTML :\n"' + html + '"\n\n' +
                    'looks like this in the DOM when assigned with jQuery.html() :\n"' + jqueryDOM + '"\n\n' +
                    'and looks like this in the DOM when assigned with innerHTML :\n"' + innerHTMLDOM + '"\n\n' +

                    'We expect the form to serialize with jQuery.serialize() to be "' + expectedSerializedValue + '"\n\n' +

                    'When using jQuery to initially set the DOM the serialized value is :\n"' + jqueryFormSerialize + '\n' +
                    'When using innerHTML to initially set the DOM the serialized value is :\n"' + innerHTMLFormSerialize + '\n\n' +

                    'jQuery test : ' + (jqueryFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") + '\n' +
                    'InnerHTML test : ' + (innerHTMLFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") 

                    );
            }

        </script>
    </head>

    <div id="placeholder">
        This is #placeholder text will 
    </div>

</html>
16
Simon_Weaver

Si vous vous interrogez sur la fonctionnalité, alors .html() de jQuery exécute la même fonctionnalité prévue que .innerHTML(), mais il vérifie également la compatibilité entre navigateurs.

Pour cette raison, utilisez toujours .html() de jQuery au lieu de .innerHTML() lorsque cela est possible.

7
David Tang

innerHTML n'est pas standard et peut ne pas fonctionner dans certains navigateurs. J'ai utilisé html () dans tous les navigateurs sans problème.

6
Craig

"Cette méthode utilise la propriété innerHTML du navigateur." - API jQuery

http://api.jquery.com/html/

3
codersarepeople

Etant donné le support général de .innerHTML ces jours-ci, la seule différence effective est que .html() exécutera du code dans n'importe quel <script> Tags s'il y en a dans le code HTML que vous en donnez. .innerHTML, sous HTML5 , ne le sera pas.

De les documents jQuery :

De par sa conception, tout constructeur ou toute méthode jQuery qui accepte une chaîne HTML - jQuery (), .append (), .after (), etc. - peut potentiellement exécuter du code. Cela peut se produire par l’injection de balises de script ou l’utilisation d’attributs HTML exécutant du code (par exemple, <img onload="">). N'utilisez pas ces méthodes pour insérer des chaînes obtenues à partir de sources non fiables telles que des paramètres de requête d'URL, des cookies ou des entrées de formulaire. Cela pourrait introduire des vulnérabilités XSS (Cross-Site-Scripting). Supprimez ou échappez toute entrée utilisateur avant d'ajouter du contenu au document.

Remarque: .innerHTML Et .html() peuvent exécuter js d’autres manières (par exemple, l’attribut onerror.).

1
RedRiderX

Voici un code pour vous aider à démarrer. Vous pouvez modifier le comportement de .innerHTML. Vous pouvez même créer votre propre shim complet .innerHTML. (P.S .: redéfinir .innerHTML fonctionnera également dans Firefox, mais pas Chrome - ils y travaillent.)

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

0
Agamemnus