jQuery - comment faire pour ajouter plusieurs nœuds pour conteneur

J'ai besoin d'ajouter de multiples nœuds d'un conteneur. Plutôt que de faire un lent DOM ajouter à l'intérieur de chaque itération, je veux de la queue, les nœuds dans un fragment de document (ouvert à d'autres idées) et ajouter tout à la fois. Voici mon code:

var fragment = document.createDocumentFragment();
$.each( poFailureInfoMultiple, function(i,e){
    fragment.appendChild(
         $('<button/>', {
            'class': 'el-contents-center multiple-record'
         })
    );
});

$('#some-container').html( fragment );

Mon problème est que je reçois un message d'erreur indiquant:

Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

Alors, comment puis-je ajouter de multiples nœuds d'élément à mon DOM à la fois? Je n'AI pas à utiliser le fragment de méthode (je viens de le trouver, et il me semblait viable).

Note:
JE NE VEUX PAS UTILISER LA SYNTAXE HTML POUR AJOUTER

i.e. $('#some-container').append('<button class="myclass"></button>');

D'où vient poFailureInfoMultiple viennent?
Pourquoi êtes-vous de mélanger les fragments de document avec jQuery. appendChild ne pas prendre un jQuery objet et $.html ne pas prendre un DocumentFragment c'est ce Que votre erreur vous dit.

InformationsquelleAutor sadmicrowave | 2012-06-14

8
```
var elemsToAppend=$()

$.each( poFailureInfoMultiple, function(i,e){
    elemsToAppend = elemsToAppend.add(
        $('<button/>', {
            'class': 'el-contents-center multiple-record'
        })
    )
}); 
$('#some-container').append(elemsToAppend)
```
L'ajout de méthode sur un objet jQuery ne modifie pas l'objet lui-même, mais renvoie un nouvel objet, qui est pourquoi vous avez besoin de elemsToAppend = elemsToAppend.add(...). Honnêtement, je ne peux pas dire à quelle vitesse cette méthode est bien. En fait je pense que le html méthode est plus rapide mais.
- J'aime cette solution beaucoup. Vous pouvez sous .ajouter pour .html( elmsToAppend ) et cela fonctionne il suffit de demander bien. Je ne suis pas sûr de savoir comment beaucoup plus rapide que le fragment est par rapport à cela, mais je n'aime pas l'utilisation de .ajouter
InformationsquelleAutor sparebytes
3

Vous sont un mélange de fragments de document avec jQuery, passer les mauvais arguments. appendChild ne pas prendre un jQuery objet et $.html ne pas prendre un DocumentFragment c'est ce Que votre erreur vous dit.

Exemple http://jsfiddle.net/YNLzg/
```
var fragment = document.createDocumentFragment();
$.each( [1,2,3], function(i,e){
    fragment.appendChild(
         $('<button/>', {
            'class': 'el-contents-center multiple-record'
         })[0] //passing the HTMLElement to appendChild, not a jQuery object
    );
});
//Can't call $.html() and pass it a fragment, call appendChild.
document.getElementById('ct').appendChild(fragment);
```
- Merci pour la clarification. Ma grande question est de savoir comment beaucoup plus rapide est l'utilisation de fragment plutôt que celui de jQuery .ajouter ? Cela semble être plus de travail, mais est le retour de la peine?
- En interne, jQuery crée des fragments de document, de sorte que les performances c'est presque la même. Voir bennadel.com/blog/... Kranklin réponse est agréable parce qu'il ne se mélange pas de standard de manipulation du DOM avec jQuery manipulation. Je ne l'ai pas fait parce que je voulais vous montrer que vous étiez de passage illégal des arguments de fonctions.
- merci pour l'explication - je vous remercie de votre aide!
- Le temps d'accepter l'une des réponses
InformationsquelleAutor Juan Mendes
0

$('#some-container').append(fragment.childNodes); va faire le travail. Pour un plaisir d'exemple, exécutez ceci dans la console:
```
var f = document.createDocumentFragment();
var div = document.createElement('div');
div.innerHTML = "<h1>This heading was not here before :)</h1>";
f.appendChild(div);
$('body').append(f.childNodes);
```
La rubrique apparaîtra au bas de la page. (Testé sur Chrome, FF7, et IE8)

Mise à JOUR:
Afin de clarifier la façon dont cela s'applique à la de code dans votre OP:
```
var fragment = document.createDocumentFragment();
$.each(poFailureInfoMultiple, function (i, e) {
    var btn = document.createElement('button');
    btn.cssClass = 'el-contents-center multiple-record';
    fragment.appendChild(btn);
});
$('#some-container').append(fragment.childNodes);
```
- cette suggestion ne fonctionne pas. Je reçois la même erreur que mon OP
- Après un autre examen, un DocumentFragment ne dispose pas d'un innerHTML propriété à utiliser. Mise à jour de répondre à testé avec, code fonctionnel.
- Mon OP dit que je ne voulais pas utiliser la syntaxe HTML pour l'élément, j'en ai besoin dans le nœud d'objet de notation.
- Je suis confus. $('#some-container').append(fragment.childNodes); est l'objet nœud de notation et de travail.
InformationsquelleAutor pete

Si vous choisissez la syntaxe html pour append (démo):

$(selector)
  .append(arrayOfContents.map(function(s){return "<span>"+s+"</span>";}).join(''));

InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.