jQuery ajoutant un tableau d'éléments

Pour le but de cette question permet de dire que nous avons besoin de append() de 1000 objets de la body élément.

Vous pouvez aller à ce sujet comme ceci:

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

Cela fonctionne, cependant, il semble inefficace pour moi, car autant que je sache ce qui va causer de 1000 document déplacé. 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 déclenche une erreur Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]. Je comprends que append() ne peut pas gérer des tableaux.

Comment aurais-je à l'aide de jQuery (je sais à propos de la DocumentFragment nœud, mais que j'ai besoin d'utiliser d'autres fonctions jQuery sur l'élément, telles que .css()) ajouter un tas d'objets pour les DOM à la fois pour améliorer les performances?

append() ne pas accepter un tableau de chaînes de caractères.
la réponse que vous avez approuvé l'est encore plus lent que votre première approche. Regardez les journaux de la console dans ce jsfiddle jsfiddle.net/du2TN/2
intéressant, bien qu'il semble que mon code fonctionne en jQuery 1.8 et est la plus rapide des méthodes jQuery. (mise à jour de votre JSfiddle)
Bon à savoir 🙂 de toute façon, @jAndi et jackwander la solution est beaucoup plus rapide. Mais si vous préférez utiliser jQuery, quelle que soit vous convient 🙂
J'ai besoin d'utiliser jQuery comme ils doivent être jQuery objets afin que je puisse utiliser d'autres fonctions jQuery en eux.

InformationsquelleAutor George Reith | 2012-08-24

59

Vous pouvez utiliser un vide objet jQuery 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 trucs avec de nouveaux élément généré à l'intérieur de la boucle. Mais notez que cela va créer une énorme pile d'éléments (à l'intérieur de l'objet jQuery).

Il semble bien que votre code fonctionne parfaitement bien avec jQuery 1.8.
- Pas d'erreur, mais rien n'est inséré dans le DOM de l'éther.
- Fonctionne très bien pour moi: jsfiddle.net/7Q6wm.
- Mon test de la solution est un peu plus compliqué, chaque élément doit faire l'objet jquery dans son propre droit, de sorte que vous pouvez effectuer d'autres fonctions jQuery sur elle. Mon mauvais pour simplifier le cas de test trop. Mise à jour de question pour refléter cela.
- Mais ensuite, à l'aide de .add et de l'insertion de la finale de l'objet jQuery devrait fonctionner quand même.
- Oups, vous avez raison, j'ai oublié que add n'a pas de mise à jour de la copie originale.
- Apparemment, le .append comportement a changé avec jQuery 1.8. Il travaille avec des tableaux de jQuery objets maintenant. C'est votre code: jsfiddle.net/7Q6wm/2. Je suppose que vous avez utilisé une version plus ancienne.
- Donc, je vais dire que cette réponse est en fait non valide pour la 1.8. J'ai passé un peu frustrant minutes en essayant de se faire jusqu'à ce que j'ai vu la mention de 1.8. Pouvez aller plus loin et de mentionner ce ne pas travail en 1.8.
- Il semble bien fonctionner pour 1.8.3: jsfiddle.net/7Q6wm/2
- Je faisais allusion à votre réponse, pas l'original de la tentative de la question, mais j'ai effectivement eu une erreur. Son elements = elemetns.add($div) pas elements.add($div)
- Mmh, j'ai dû poster le mauvais lien. Oui, il fonctionne très bien: jsfiddle.net/eb69sdbz.
- ne fonctionne pas dans les anciennes versions de jQuery, utiliser le document.createDocumentFragment méthode décrite par @jackwanders
- votre exemple précédent pourrait inspirer naïf JS développeurs d'introduire les attaques XSS si elles sont à l'emballage HTML autour des données de l'utilisateur, par exemple, elements = elements.add('<div>'+usernames[i]+'</div>');—comme vous faites référence à 1,8 prend désormais en charge les autres, les gens de créer des objets tels que les suivants elements.push($('<div>', {text: usernames[i]})); où text HTML échappe à l'entrée pour la sécurité de l'insertion.
InformationsquelleAutor Felix Kling
13

Vous pourrait simplement appeler
```
$('body').append(elements.join(''));
```
Ou vous pouvez simplement créer une grande chaîne dans la première place.
```
var elements = '';
for(x = 0; x < 1000; x++) {
    elements = elements + '<div>'+x+'</div>';
}
$(document.body).append(elements);
```
Comme vous l'avez dit, probablement la plus "bonne" façon est l'utilisation d'une DocFrag. 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 il aurait besoin d'un contrôle conditionnel à l'utilisation .innerText ou .text à la place.}
- +1, Mais pourquoi ne pas +=?
- rien de mal avec l'aide de += de cours. Je voulais juste être plus explicite et expresive ici.
- Merci Andy, mais j'ai peur de trop simpliste à mon cas de test (mon mauvais), je me doit de fait de chaque élément de son propre objet, de sorte que vous pouvez exécuter des fonctions jQuery comme .css() sur eux. J'ai mis à jour les cas de test dans la question.
- Ne pourrait-il pas être newDiv.textContent = x;?
- J'ai pris la liberté de l'éditer moi-même...
InformationsquelleAutor jAndy
8

Depuis $.fn.ajouter prend un nombre variable d'éléments que nous pouvons utiliser apply pour passer le tableau en tant qu'arguments à elle:
```
el.append.apply(el, myArray);
```
Cela fonctionne si vous avez un tableau d'objets jQuery. Selon la spécification si vous pouvez ajouter un tableau d'éléments si vous avez les éléments du DOM. Si vous avez un tableau de chaînes html, vous pouvez simplement .join(") et ajouter tout à la fois.
- Merci. C'est la réponse si vous êtes coincé avec JQuery < 1.8
InformationsquelleAutor Jethro Larson
7

De mise à niveau de jQuery 1.8, cela fonctionne comme prévu:
```
$('body').append([
    '<b>1</b>',
    '<i>2</i>'   
]);
```
InformationsquelleAutor Alexey Lebedev
3

Une légère modification à votre deuxième approche:
```
var elements = [],
newDiv;
for (x = 0; x < 1000; x++) {
    newDiv = $('<div/>').text(x);
    elements.push(newDiv);
}
$('body').append(elements);
```
$.append() ne peut certainement ajouter un tableau: http://api.jquery.com/append/

.append(contenu) | contenu: Un ou plusieurs autres éléments du DOM, des tableaux d'éléments, les chaînes HTML, jQuery objets à insérer à la fin de chaque élément de l'ensemble des éléments qui correspondent.
- jQuery est très stricte à cet égard. Quand il dit "tableau d'éléments", cela signifie vraiment d'éléments DOM, pas jQuery objets. Et en effet, en utilisant 1.7.2, ce code ne fonctionne pas, mais il fonctionne en 1.8.
- Merci pour la correction de Felix.
InformationsquelleAutor Dog
3

Parfois, jQuery n'est pas la meilleure solution. Si vous avez beaucoup d'éléments à ajouter à la 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);
```
- Ne pas utiliser jQuery fragment de document en interne dans le cas où vous passez un tableau? À partir de l'erreur ci-dessus, il semble donc.
- Merci! Cela a fonctionné pour moi, je travaille sur un projet qui utilise une ancienne version de jQuery qui n'a pas en charge les tableaux mais qui fonctionne bien avec createDocumentFragment.
InformationsquelleAutor jackwanders
0

Si vous allez pour la performance brute alors je suggère pure JS, bien que certains prétendent que votre performance en matière de développement est plus important que votre site/le rendement du programme.
Cochez cette lien de repères et une vitrine des différents DOM techniques d'insertion.

edit:

Comme une curiosité, documentFragment s'avère être l'un des plus faibles des méthodes.
- que jsPerf est d'emballage documentFragment dans un $() appel, ce qui est probablement ce qui est de le ralentir. documentFragment est toujours utile si vous allez pour un pur JS solution.
- Ce test est un étrange mélange de DOM et jQuery, je ne pense pas qu'il est très concluant.
- Il utilise du jQuery, mais le réel ajout se fait à l'aide de différentes méthodes.
InformationsquelleAutor MalSu
0

Je voudrais utiliser 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);
}
```
EDIT:

Là vous allez un jsfiddle avec différentes options de mise en œuvre. Le @jackwander la solution est, clairement, la plus efficace.
- vous êtes encore en train de faire 1000 séparé appendChild opérations, qui sera lente.
- vous êtes complètement à droite, j'ai mis en place votre solution de mine et est clairement plus rapide, il peut être vu dans le jsfiddle j'ai attaché
InformationsquelleAutor davids

Vous devez vous connecter pour publier un commentaire.