jQuery .html() vs .append()

Question

Disons que j’ai un div vide :

Est la suivante :

La même chose que :

Answer 1

Chaque fois que vous passez une chaîne de code HTML à l'un de jQuery méthodes, c'est ce qui se passe:

Temporaire élément est créé, nous allons l'appeler x. x innerHTML est attribuée à la chaîne de code HTML que vous avez réussi. JQuery va de transfert de chacun des nœuds (qui est x childNodes) sur un nouveau fragment de document, qu'il met ensuite en cache pour la prochaine fois. Il sera ensuite de retour du fragment childNodes frais DOM collection.

A noter qu'il est en fait beaucoup plus compliqué que cela, que jQuery n'est un tas de croix-navigateur vérifie et divers autres optimisations. E. g. si vous passer juste <div></div> de jQuery(), jQuery va prendre un raccourci, et qu' document.createElement('div').

EDIT: Pour voir la quantité de contrôles que jQuery effectue, jetez un oeil ici, ici et ici.

---

innerHTML est généralement le plus rapide approche, bien que ne vous laissez pas gouverner ce que vous faites tout le temps. jQuery approche n'est pas tout à fait aussi simple que d' element.innerHTML = ... -- comme je l'ai mentionné, il y a un tas de vérifications et d'optimisations produit.

---

La technique correcte dépend fortement de la situation. Si vous souhaitez créer un grand nombre d'éléments identiques, alors la dernière chose que vous voulez faire est de créer une énorme boucle, la création d'un nouvel objet jQuery à chaque itération. E. g. le moyen le plus rapide pour créer 100 divs avec jQuery:

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

---

Il y a aussi des questions de lisibilité et de maintenance à prendre en compte.

Ce:

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

... est beaucoup plus difficile à maintenir que ceci:

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

Answer 2

Ils ne sont pas les mêmes. Le premier remplace le code HTML sans créer un autre objet jQuery en premier. La seconde crée un supplément de jQuery wrapper pour la deuxième div, puis ajoute à la première.

Un jQuery Wrapper (par exemple):

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

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

Deux jQuery Wrappers (par exemple):

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

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

Vous avez un peu différents cas d'utilisation en cours. Si vous souhaitez remplacer le contenu, .html est un grand appel depuis son équivalent innerHTML = "...". Toutefois, si vous voulez juste pour ajouter du contenu, de l'extra - $() wrapper set est inutile.

Utilisez uniquement les deux papiers d'emballage si vous avez besoin de manipuler l'ajoutés div plus tard. Même dans ce cas, il se peut que vous ne devez utiliser un:

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

Answer 3

if de tu veux dire , alors le résultat est le même si `` est vide.

est-la performance même ? Sais pas.

finit par faire la même chose que

Answer 4

Eh bien, .html () utilise .innerHTML qui est plus rapide que la création DOM.

Answer 5

Vous pouvez obtenir la deuxième méthode pour obtenir le même effet en:

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

Luca a mentionné que html() insère simplement du code HTML, ce qui se traduit par des performances plus rapides.

Dans certaines occasions cependant, vous opterez pour la deuxième option, pensez à:

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