JQuery html () vs. innerHTML

Question 1

Kann ich mich vollständig darauf verlassen, dass sich die html()Methode von jQuery identisch mit verhält innerHTML? Gibt es einen Unterschied zwischen innerHTMLund der html()Methode von jQuery ? Wenn beide Methoden dasselbe tun, kann ich die html()Methode von jQuery anstelle von verwenden innerHTML?

Mein Problem ist: Ich arbeite an bereits gestalteten Seiten, die Seiten enthalten Tabellen und in JavaScript wird die innerHTMLEigenschaft verwendet, um sie dynamisch zu füllen.

Die Anwendung funktioniert einwandfrei unter Firefox, aber Internet Explorer löst einen Fehler aus : unknown runtime exception. Ich habe die html()Methode von jQuery verwendet und der IE -Fehler ist verschwunden. Ich bin mir jedoch nicht sicher, ob es für alle Browser funktioniert, und ich bin mir nicht sicher, ob alle innerHTMLEigenschaften durch die html()Methode von jQuery ersetzt werden sollen.

Danke vielmals.

Question 2

Zur Beantwortung Ihrer Frage:

.html()ruft nur .innerHTMLnach einigen Überprüfungen für nodeTypes und andere Dinge auf. Es wird auch ein try/catchBlock verwendet, in dem innerHTMLzuerst versucht wird, ihn zu verwenden. Wenn dies fehlschlägt, wird ordnungsgemäß auf jQuery's .empty()+ zurückgegriffenappend()

Question 3

Insbesondere in Bezug auf "Kann ich mich vollständig auf die jquery html () -Methode verlassen, die wie innerHTML funktioniert" lautet meine Antwort NEIN!

Führen Sie dies in Internet Explorer 7 oder 8 aus und Sie werden sehen.

jQuery erzeugt fehlerhaftes HTML, wenn HTML festgelegt wird, das ein <FORM> -Tag enthält, das in einem <P> -Tag verschachtelt ist, wobei der Anfang der Zeichenfolge eine neue Zeile ist!

Hier gibt es mehrere Testfälle, und die Kommentare beim Ausführen sollten selbsterklärend genug sein. Das ist ziemlich dunkel, aber nicht zu verstehen, was los ist, ist ein wenig beunruhigend. Ich werde einen Fehlerbericht einreichen.

<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>

Question 4

Wenn Sie sich über die Funktionalität wundern, führt jQuery's .html()die gleiche beabsichtigte Funktionalität aus wie .innerHTML, führt jedoch auch Überprüfungen auf browserübergreifende Kompatibilität durch.

Aus diesem Grund können Sie immer jQuery's verwenden, .html()anstatt .innerHTMLwenn möglich.

Question 5

innerHTML ist kein Standard und funktioniert in einigen Browsern möglicherweise nicht. Ich habe html () in allen Browsern ohne Probleme verwendet.

Question 6

"Diese Methode verwendet die innerHTML-Eigenschaft des Browsers." - jQuery API

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

Question 7

In Anbetracht der allgemeinen Unterstützung.innerHTML ist in diesen Tagen, die einzig wirksame Unterschied jetzt, .html()wird Code in irgendwelchen ausführen <script>Tags , wenn es irgendeine in den HTML - Code können Sie es geben. .innerHTML, Unter HTML5 , nicht.

Aus den jQuery-Dokumenten :

Jeder jQuery-Konstruktor oder jede jQuery-Methode, die eine HTML-Zeichenfolge akzeptiert - jQuery (), .append (), .after () usw. - kann möglicherweise Code ausführen. Dies kann durch Einfügen von Skript-Tags oder durch Verwendung von HTML-Attributen geschehen, die Code ausführen (z. B. <img onload="">). Verwenden Sie diese Methoden nicht, um Zeichenfolgen einzufügen, die aus nicht vertrauenswürdigen Quellen stammen, z. B. URL-Abfrageparameter, Cookies oder Formulareingaben. Dies kann zu XSS-Schwachstellen (Cross-Site-Scripting) führen. Entfernen oder entfernen Sie Benutzereingaben, bevor Sie dem Dokument Inhalt hinzufügen.

Hinweis: Beide .innerHTMLund .html()können js auf andere Weise ausführen (z onerror. B. das Attribut).

Question 8

Hier ist ein Code, mit dem Sie beginnen können. Sie können das Verhalten von .innerHTML ändern - Sie können sogar Ihren eigenen vollständigen .innerHTML-Shim erstellen. (PS: Die Neudefinition von .innerHTML funktioniert auch in Firefox, aber nicht in Chrome - sie arbeiten daran.)

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/