web-dev-qa-db-fra.com

jquery .html () vs .append ()

Disons que j'ai une div vide:

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

Est-ce:

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

Le même que:

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

À chaque fois que vous passez une chaîne de code HTML à l'une des méthodes de jQuery, voici ce qui se passe:

Un élément temporaire est créé, appelons-le x. La variable innerHTML de x est définie sur la chaîne de code HTML que vous avez transmise. Ensuite, jQuery transférera chacun des nœuds produits (c'est-à-dire la variable childNodes de x) vers un fragment de document nouvellement créé, qu'il mettra ensuite en cache pour la prochaine fois. Il retournera alors la variable childNodes du fragment en tant que nouvelle collection DOM. 

Notez que c’est beaucoup plus compliqué que cela, car jQuery effectue de nombreuses vérifications entre navigateurs et diverses optimisations. Par exemple. si vous passez juste <div></div> à jQuery(), jQuery utilisera un raccourci et fera simplement document.createElement('div').

EDIT: pour voir la quantité de contrôles effectués par jQuery, jetez un œil à ici , ici et ici .

innerHTML est généralement l'approche la plus rapide, bien que cela ne gouverne pas tout ce que vous faites. L'approche de jQuery n'est pas aussi simple que celle de element.innerHTML = ... - comme je l'ai déjà mentionné, de nombreuses vérifications et optimisations sont en cours. 

La technique correcte dépend fortement de la situation. Si vous souhaitez créer un grand nombre d'éléments identiques, la dernière chose à faire est de créer une boucle massive, créant un nouvel objet jQuery à chaque itération. Par exemple. le moyen le plus rapide de créer 100 divs avec jQuery:

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

Il y a aussi des problèmes de lisibilité et de maintenance à prendre en compte.

Ce:

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

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

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

Ils ne sont pas les mêmes. Le premier remplace le code HTML sans créer d’autre objet jQuery au préalable. Le second crée un wrapper jQuery supplémentaire pour le second div, puis l'ajoute au premier.

Un wrapper jQuery (par exemple):

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

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

Deux wrappers jQuery (par exemple):

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

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

Vous avez quelques cas d'utilisation différents en cours. Si vous souhaitez remplacer le contenu, .html est un excellent appel car son équivalent de innerHTML = "...". Toutefois, si vous souhaitez simplement ajouter du contenu, le groupe d'encapsuleurs $() supplémentaire n'est pas nécessaire.

N'utilisez que deux wrappers si vous devez manipuler la variable div ajoutée ultérieurement. Même dans ce cas, vous n’auriez peut-être besoin que d’un seul:

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

si par .add vous voulez dire .append, le résultat est identique si #myDiv est vide.

la performance est-elle la même? ne sais pas.

.html(x) finit par faire la même chose que .empty().append(x)

18
mkoryak

.html() utilise .innerHTML qui est plus rapide que DOM creation.

9
Luca Matteis

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 entraîne des performances plus rapides.

Dans certaines occasions cependant, vous opterez pour la deuxième option, considérez:

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

Autre que les réponses données, dans le cas où vous avez quelque chose comme ceci:

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

ce qui signifie que vous souhaitez ajouter automatiquement un fichier supplémentaire si des fichiers ont été téléchargés, le code mentionné ne fonctionnera pas, car après le téléchargement du fichier, le premier élément de téléchargement de fichier sera recréé et le fichier téléchargé en sera effacé. . Vous devriez utiliser .append () à la place:

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

Ça m'est arrivé . Version Jquery: 3.3. Si vous parcourez une liste d'objets et souhaitez ajouter chaque objet en tant qu'enfant d'un élément dom parent, alors .html et .append se comporteront de manière très différente. .html finira par n’ajouter que le dernier objet à l’élément parent, tandis que .append ajoutera tous les objets de la liste en tant qu’enfants de l’élément parent. 

0
Binita Bharati