web-dev-qa-db-fra.com

jQuery ajout d'un tableau d'éléments

Aux fins de cette question, disons que nous avons besoin de append() 1000 objets dans l'élément body.

Vous pouvez vous y prendre comme ceci:

for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('body').append(element);
}

Cela fonctionne, mais cela me semble inefficace, car selon les informations dont je dispose, cela entraînera 1 000 reflux de documents. Une meilleure solution serait:

var elements = [];
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    elements.Push(element);
}
$('body').append(elements);

Cependant, ce n'est pas un monde idéal et cela jette une erreur Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]. Je comprends que append() ne peut pas gérer les tableaux.

Comment pourrais-je utiliser jQuery (je connais le nœud DocumentFragment , mais je suppose que je dois utiliser d'autres fonctions jQuery sur l'élément, telles que .css()) ajouter un groupe d'objets à la fois pour améliorer les performances?

javascriptjqueryarraysperformanceappend
47
George Reith

Vous pouvez utiliser un objet jQuery vide au lieu d'un tableau:

var elements = $();
for(x = 0; x < 1000; x++) {
    elements = elements.add('<div>'+x+'</div>');
    // or 
    // var element = $('<div>'+x+'</div>');
    // elements = elements.add(element);
}
$('body').append(elements);

Cela peut être utile si vous voulez faire des choses avec un élément nouvellement généré dans la boucle. Mais notez que cela créera une énorme pile interne d'éléments (à l'intérieur de l'objet jQuery).

Il semble cependant que votre code fonctionne parfaitement avec jQuery 1.8.

59
Felix Kling

Vous pouvez simplement appeler

$('body').append(elements.join(''));

Ou vous pouvez simplement créer une grande chaîne en premier lieu.

var elements = '';
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);

Comme vous l'avez mentionné, l'utilisation de DocFrag est probablement la méthode la plus "correcte". Cela pourrait ressembler à

var elements = document.createDocumentFragment(),
    newDiv;
for(x = 0; x < 1000; x++) {
    newDiv = document.createElement('div');
    newDiv.textContent = x;
    elements.append( newDiv );
}
$(document.body).append(elements);

.textContent n'est pas pris en charge par IE <9 et nécessiterait une vérification conditionnelle pour utiliser .innerText ou .text au lieu.

13
jAndy

Puisque $ .fn.append prend un nombre variable d'éléments, nous pouvons utiliser apply pour passer le tableau en tant qu'arguments:

el.append.apply(el, myArray);

Cela fonctionne si vous avez un tableau d'objets jQuery. Selon les spécifications, vous pouvez cependant ajouter un tableau d’éléments si vous avez les éléments DOM. Si vous avez un tableau de chaînes html, vous pouvez simplement les joindre et les ajouter en même temps.

8
Jethro Larson

Mettez à niveau vers jQuery 1.8, cela fonctionne comme prévu:

​$('body')​.append([
    '<b>1</b>',
    '<i>2</i>'   
])​;​
7
Alexey Lebedev

Parfois, jQuery n'est pas la meilleure solution. Si vous avez beaucoup d'éléments à ajouter au DOM, documentFragment est une solution viable:

var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementsByTagName('body')[0].appendChild(fragment);
3
jackwanders

Un léger changement dans votre deuxième approche:

var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.Push(newDiv);
}
$('body').append(elements);

$ .append () peut certainement ajouter un tableau: http://api.jquery.com/append/

.append (contenu) | content: un ou plusieurs éléments DOM supplémentaires, des tableaux d'éléments, des chaînes HTML ou des objets jQuery à insérer à la fin de chaque élément de l'ensemble des éléments correspondants.

3
Dog

Je sais, la question est ancienne, mais peut-être que cela aide les autres.

Ou simple utilisation opérateur de propagation ECMA6:

$('body').append(...elements);
1
shaedrich

Je voudrais utiliser le Javascript natif, normalement beaucoup plus rapide:

var el = document.getElementById('the_container_id');
var aux;
for(x = 0; x < 1000; x++) {
    aux = document.createElement('div');
    aux.innerHTML = x;
    el.appendChild(aux);
}

MODIFIER:

Là vous allez un jsfiddle avec différentes options implémentées. La solution de @ jackwander est, de toute évidence, la plus efficace.

0
davids

Si vous visez les performances brutes, je suggérerais du JS pur, bien que certains soutiennent que vos performances de développement sont plus importantes que celles de votre site/programme. Vérifiez ceci lien pour des tests de performance et une présentation de différentes techniques d’insertion DOM.

modifier:

Par curiosité, documentFragment s'avère être l'une des méthodes les plus lentes.

0
MalSu