wake-up-neo.net

jquery .html () vs .append ()

Lass uns sagen, ich habe ein leeres div:

<div id='myDiv'></div>

Ist das:

$('#myDiv').html("<div id='mySecondDiv'></div>");

Das Gleiche wie:

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
231

Wenn Sie eine HTML-Zeichenfolge an eine der Methoden von jQuery übergeben, geschieht Folgendes:

Ein temporäres Element wird erstellt, nennen wir es x. innerHTML von x ist auf die HTML-Zeichenfolge gesetzt, die Sie übergeben haben. JQuery überträgt dann jeden der produzierten Knoten (dh childNodes von x) in ein neu erstelltes Dokumentfragment, das dann für das nächste Mal zwischengespeichert wird. Dann wird die childNodes des Fragments als neue DOM-Sammlung zurückgegeben. 

Beachten Sie, dass es tatsächlich viel komplizierter ist, da jQuery eine Reihe von Browserüberprüfungen und verschiedene andere Optimierungen durchführt. Z.B. Wenn Sie nur <div></div> an jQuery() übergeben, nimmt jQuery eine Verknüpfung und führt einfach document.createElement('div') aus.

EDIT: Um zu sehen, wie viele Prüfungen jQuery durchführt, werfen Sie einen Blick auf here , hier und hier .


innerHTML ist allgemein der schnellere Ansatz, obgleich dies nicht die Regel ist, was Sie tun. Der Ansatz von jQuery ist nicht ganz so einfach wie element.innerHTML = ... - wie bereits erwähnt, gibt es eine Reihe von Überprüfungen und Optimierungen. 


Die richtige Technik hängt stark von der Situation ab. Wenn Sie eine große Anzahl identischer Elemente erstellen möchten, müssen Sie als letztes eine massive Schleife erstellen und bei jeder Iteration ein neues jQuery-Objekt erstellen. Z.B. Der schnellste Weg zum Erstellen von 100 Divs mit jQuery:

jQuery(Array(101).join('<div></div>'));

Es sind auch Fragen der Lesbarkeit und Wartung zu berücksichtigen.

Diese:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... ist viel schwieriger zu warten als dies:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});
303
James

Sie sind nicht gleich. Das erste ersetzt das HTML, ohne vorher ein anderes jQuery-Objekt zu erstellen. Der zweite erstellt einen zusätzlichen jQuery-Wrapper für das zweite div, dann hängt an an den ersten.

Ein jQuery-Wrapper (pro Beispiel):

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

Zwei jQuery-Wrapper (pro Beispiel):

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

Es gibt ein paar verschiedene Anwendungsfälle. Wenn Sie den Inhalt ersetzen möchten, ist .html ein hervorragender Aufruf, da er äquivalent zu innerHTML = "..." ist. Wenn Sie jedoch nur Inhalte anfügen möchten, ist das zusätzliche Wrapper-Set $() nicht erforderlich.

Verwenden Sie nur zwei Wrapper, wenn Sie die hinzugefügte div später bearbeiten müssen. Selbst in diesem Fall müssen Sie möglicherweise nur einen verwenden:

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();
57
Doug Neiner

wenn Sie mit .add.append meinen, ist das Ergebnis dasselbe, wenn #myDiv leer ist.

ist die Leistung gleich? weiß es nicht.

.html(x) macht am Ende dasselbe wie .empty().append(x)

18
mkoryak

Nun, .html() verwendet .innerHTML, was schneller ist als DOM creation.

9
Luca Matteis

Sie können die zweite Methode erhalten, um denselben Effekt zu erzielen, indem Sie

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca erwähnte, dass html() nur HTML einfügt, was zu einer schnelleren Leistung führt.

In einigen Fällen würden Sie sich jedoch für die zweite Option entscheiden.

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);
6
kizzx2

Andere als die gegebenen Antworten, falls Sie etwas wie das haben:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

das bedeutet, dass Sie automatisch einen weiteren Datei-Upload hinzufügen möchten, wenn Dateien hochgeladen wurden. Der angegebene Code funktioniert nicht, da nach dem Hochladen der Datei das erste Datei-Upload-Element erneut erstellt wird und die hochgeladene Datei daher gelöscht wird . Sie sollten stattdessen .append () verwenden:

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }
2
Arianbakh

Das ist mir passiert. Jquery-Version: 3.3. Wenn Sie eine Liste von Objekten durchlaufen und jedes Objekt als untergeordnetes Element eines übergeordneten dom-Elements hinzufügen möchten, verhalten sich HTML und .append sehr unterschiedlich. .html fügt am Ende nur das letzte Objekt zum übergeordneten Element hinzu, wohingegen .append alle Listenobjekte als untergeordnete Elemente des übergeordneten Elements hinzufügt. 

0
Binita Bharati