jquery .html () vs .append ()

Nehmen wir an, 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);

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

Ein temporäres Element wird erstellt, nennen wir es x. x's innerHTMLwird auf die HTML-Zeichenfolge gesetzt, die Sie übergeben haben. Dann überträgt jQuery jeden der erzeugten Knoten (dh x childNodes) auf ein neu erstelltes Dokumentfragment, das dann für das nächste Mal zwischengespeichert wird. Das Fragment wird dann childNodesals neue DOM-Sammlung zurückgegeben.

Beachten Sie, dass es tatsächlich viel komplizierter ist, da jQuery eine Reihe von browserübergreifenden Überprüfungen und verschiedenen anderen Optimierungen durchführt. Wenn Sie beispielsweise nur <div></div>an übergeben jQuery(), nimmt jQuery eine Verknüpfung und tut dies einfach document.createElement('div').

BEARBEITEN : Um zu sehen, wie viele Überprüfungen von jQuery durchgeführt werden, schauen Sie hier , hier und hier .

innerHTMList im Allgemeinen der schnellere Ansatz, obwohl dies nicht die ganze Zeit regeln darf, 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. ZB der schnellste Weg, um mit jQuery 100 Divs zu erstellen:

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

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

Dies:

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

... ist viel schwieriger zu pflegen als dies:

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

Sie sind nicht gleich. Der erste ersetzt den HTML-Code, ohne zuerst ein anderes jQuery-Objekt zu erstellen. Der zweite erstellt einen zusätzlichen jQuery-Wrapper für den zweiten Div und hängt ihn dann an den ersten an.

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

Sie haben einige verschiedene Anwendungsfälle. Wenn Sie den Inhalt ersetzen möchten, .htmlist dies ein guter Anruf, da er dem entspricht innerHTML = "...". Wenn Sie jedoch nur Inhalte anhängen möchten, ist das zusätzliche $()Wrapper-Set nicht erforderlich.

Verwenden Sie nur zwei Wrapper, wenn Sie die divspäter hinzugefügten 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();

Wenn .addSie damit meinen .append, ist das Ergebnis dasselbe, wenn #myDives leer ist.

Ist die Leistung gleich? weiß nicht.

.html(x) macht am Ende das Gleiche wie .empty().append(x)

Nun, .html()verwendet, .innerHTMLdie schneller ist als die DOM- Erstellung.

Sie können die zweite Methode erhalten, um den gleichen Effekt zu erzielen, indem Sie:

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

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

In einigen Fällen entscheiden Sie sich jedoch für die zweite Option. Beachten Sie Folgendes:

// 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);

.html() wird alles ersetzen.

.append() wird nur am Ende angehängt.

Abgesehen von den gegebenen Antworten, falls Sie so etwas 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>

Dies bedeutet, dass Sie automatisch einen weiteren Datei-Upload hinzufügen möchten, wenn Dateien hochgeladen wurden. Der genannte Code funktioniert nicht, da nach dem Hochladen der Datei das erste Element zum Hochladen von Dateien neu erstellt und daher die hochgeladene Datei 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;
        }
    }

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. .htmlAm Ende wird nur das letzte Objekt zum übergeordneten Element hinzugefügt, während .appendalle Listenobjekte als untergeordnete Elemente des übergeordneten Elements hinzugefügt werden.