11486 sujets

JavaScript, DOM et API Web HTML5

Document.fragment avec Jquery

Bonjour,
Je cherche à créer un fragment html avec Jquery. Je sais le faire en javascript mais je n'ai pas trouvé de solution malgré des recherches sur internet.
J'ai donc codé une solution qui marche mais je voudrais savoir si il existe une meilleure solution.
Voici mon code actuel :

var documentFragment = $(document.createDocumentFragment());
var div = $('<div id="ligthboxImage"></div>'); // Création de ma div conteneur
// Je parcours le retour Json de ma requête Ajax
$.each(json.reponse, function(cle, valeur){
    // Création d'une balise a à chaque tour de boucle
    var a = $('<a></a>');
    a.attr('href',valeur.chemin);
    a.attr('alt',valeur.description);
    a.attr('data-imagelightbox',"f");
    // Ajout du noeud à la div
     div.append(a);
});
// Ajout de la div dans le fragment
documentFragment.append(div);
// Ajout du fragment dans le body
$('body').append(documentFragment);

J'utilise la dernière version de Jquery : jQuery 1.11.1

Merci beaucoup!
Et pourquoi utiliser absolument jQuery si tu peux le faire en "vanilla Javascript" ? Smiley cligne
D'ailleurs , à ta place, j'utiliserais le javascript de base au maximum : pour tout l'intérieur de la boucle, jQuery ne sert à rien d'autre qu'à tuer les performances de ton code : il n'est pas plus lisible, et fait appel à beaucoup de fonctions, contrairement au code qui suit :

var documentFragment = document.createDocumentFragment();
var $div = $('<div id="ligthboxImage"></div>'); // Création de ma div conteneur
// Je parcours le retour Json de ma requête Ajax
$.each(json.reponse, function(cle, valeur){
    // Création d'une balise a à chaque tour de boucle
    var a = document.createElement('a');
    a.href = valeur.chemin;
    a.alt = valeur.description);
    if (a.dataset !== undefined)
        a.dataset.imagelightbox = "f";
    else
        $(a).data('imagelightbox', "f");
    // Ajout du noeud à la div
     documentFragment.appendChild(a);
});
// Ajout du fragment dans le div, et du div dans le body
$('body').append($div.append(documentFragment));
laruiss, merci beaucoup pour ta réponse.
Je ne connaissais pas le terme "vanilla Javascript". En recherchant sur google, j'ai trouvé beaucoup d'articles très intéressant Smiley ravi
Vu que j'utilise Jquery, je me suis dit autant l'utiliser pour tout. Mais je pense que tu as raison, les fonctions natives sont plus rapide et après avoir fais des tests sur http://jsperf.com/, ta solution est plus performante.

Merci !
Sujet clos
Aller à