jquery .html () vs .append ()

Diciamo che ho un div vuoto:

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

È questo:

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

Lo stesso di:

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

Ogni volta che passi una stringa di HTML a uno dei metodi di jQuery, ecco cosa succede:

Viene creato un elemento temporaneo, chiamiamolo x. x's innerHTMLè impostato sulla stringa di HTML che hai passato. Quindi jQuery trasferirà ciascuno dei nodi prodotti (ovvero x childNodes) su un frammento di documento appena creato, che verrà quindi memorizzato nella cache per la volta successiva. Restituirà quindi il frammento childNodescome una nuova raccolta DOM.

Si noti che in realtà è molto più complicato di così, poiché jQuery fa un sacco di controlli cross-browser e varie altre ottimizzazioni. Ad esempio, se passi solo <div></div>a jQuery(), jQuery prenderà una scorciatoia e semplicemente lo farà document.createElement('div').

EDIT : per vedere la mera quantità di controlli che jQuery esegue, dai un'occhiata qui , qui e qui .

innerHTMLè generalmente l'approccio più veloce, anche se non lasciare che governare ciò che fai tutto il tempo. L'approccio di jQuery non è così semplice come element.innerHTML = ...- come ho già detto, si verificano numerosi controlli e ottimizzazioni.

La tecnica corretta dipende fortemente dalla situazione. Se si desidera creare un gran numero di elementi identici, l'ultima cosa che si desidera fare è creare un ciclo enorme, creando un nuovo oggetto jQuery su ogni iterazione. Ad esempio il modo più veloce per creare 100 div con jQuery:

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

Ci sono anche problemi di leggibilità e manutenzione da tenere in considerazione.

Questo:

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

... è molto più difficile da mantenere rispetto a questo:

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

Non sono gli stessi. Il primo sostituisce l'HTML senza prima creare un altro oggetto jQuery. Il secondo crea un wrapper jQuery aggiuntivo per il secondo div, quindi lo aggiunge al primo.

Un wrapper jQuery (per esempio):

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

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

Due wrapper jQuery (per esempio):

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

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

Sono in corso diversi casi d'uso. Se si desidera sostituire il contenuto, .htmlè un'ottima chiamata poiché è l'equivalente di innerHTML = "...". Tuttavia, se si desidera solo aggiungere contenuto, il $()set di wrapper aggiuntivo non è necessario.

Utilizzare solo due wrapper se è necessario manipolare l'aggiunta in divseguito. Anche in quel caso, potresti ancora averne bisogno:

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

se .addintendi .append, allora il risultato è lo stesso se #myDivè vuoto.

la performance è la stessa? non lo so.

.html(x) finisce per fare la stessa cosa di .empty().append(x)

Bene, .html()utilizza ciò .innerHTMLche è più veloce della creazione di DOM .

Puoi ottenere il secondo metodo per ottenere lo stesso effetto:

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

Luca ha detto che html()inserisce solo HTML che si traduce in prestazioni più veloci.

In alcune occasioni, tuttavia, dovresti optare per la seconda opzione, considera:

// 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() sostituirà tutto.

.append() alla fine aggiungerò.

Oltre alle risposte fornite, nel caso in cui tu abbia qualcosa del genere:

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

nel senso che si desidera aggiungere automaticamente un altro caricamento di file se sono stati caricati file, il codice citato non funzionerà, perché dopo il caricamento del file verrà ricreato il primo elemento di caricamento del file e quindi il file caricato verrà cancellato da esso . Dovresti usare .append () invece:

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

Questo mi è successo. Versione Jquery: 3.3. Se esegui il looping di un elenco di oggetti e desideri aggiungere ogni oggetto come figlio di un elemento dom padre, allora .html e .append si comporteranno in modo molto diverso. .htmlfinirà per aggiungere solo l'ultimo oggetto all'elemento genitore, mentre .appendaggiungerà tutti gli oggetti della lista come figli dell'elemento genitore.