web-dev-qa-db-fra.com

Meilleure façon d'ajouter des éléments DOM avec jQuery

J'ai donc vu trois façons d'ajouter des éléments HTML/DOM à une page. Je suis curieux de savoir quels sont les avantages et les inconvénients de chacun d’eux. 

1 - JavaScript traditionnel

Je pense que la manière la plus simple de procéder est de construire chaque élément, de définir des attributs, puis de les ajouter. Exemple:

var myRow = document.createElement("tr");
myRow.class = "myClass";

var firstTD = document.createElement("td");
firstTD.innerHTML = "first";
myRow.appendChild(firstTD);

var secondTD = document.createElement("td");
secondTD.innerHTML = "second";
myRow.appendChild(secondTD);

document.getElementById("myContainer").appendChild(myRow);

2 - Ajout d'une chaîne de code html via jQuery

J'ai remarqué que la plupart des exemples jQuery que je vois ne font généralement qu'ajouter une chaîne de code HTML.
Exemple:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>');

3 - jQuery's .clone ()

J'ai également vu beaucoup d'utilisations et de références à .clone () dans jQuery.
Exemple:

$("#myContainer").append($(".myClass").Clone());

J'aimerais entendre ce que les autres ont à dire à ce sujet.

(Cela semble également être un bon candidat pour un 'wiki de communauté', mais je ne les connais pas trop bien. Quelqu'un voudra-t-il commenter et me faire savoir s'il devrait l'être? Merci]

javascriptjquerydom
42
sdr

Si vous utilisez jQuery 1.4, le meilleur moyen est le suivant:

$("<a/>", {
    id: 'example-link',
    href: 'http://www.example.com/',
    text: 'Example Page'
}).appendTo("body");
62
sp.

Si vous avez déjà un élément de modèle que vous souhaitez copier, utilisez absolument clone ().

Mais si vous voulez créer un élément à partir de rien, il existe essentiellement deux méthodes auxquelles vous avez fait allusion:

  1. Créez des éléments DOM en tant qu'objets (en utilisant createElement, par exemple).
  2. Créez des éléments DOM en tant que HTML (en utilisant innerHTML ou html () de jQuery, par exemple).

Tout d’abord, si l’une des méthodes est plus intuitive ou plus facile à écrire pour vous, je vous recommande simplement de le faire. 

Sinon, l’utilisation de ces derniers présente un avantage: elle est plus propre si l’élément a de nombreux enfants. Par exemple, essayez de créer une ligne de tableau avec 6 colonnes, chacune avec une classe différente en utilisant la première méthode. Votre code sera beaucoup plus long que si vous utilisiez la deuxième méthode.

Pour ce qui est des performances, c'est un bon guide http://andrew.hedges.name/experiments/innerhtml/ mais la réponse courte est que dans la plupart des cas, les différences sont assez négligeables. Un bon guide pour la performance en général est aussi: http://www.artzstudio.com/2009/04/jquery-performance-rules/ . La 6ème astuce concerne la manipulation du DOM.

4
jhchen

Cloner le contenu existant ...

var $ html = $ template.clone ();
  $ html.find (''); /// après modification du contenu ... 

En raison du contenu cloné est avec les propriétés 'DOM'. Ensuite, vous pouvez modifier ces balises, propriétés, valeur puis ajoutez-le.

0
pradeep

Si vous travaillez avec de grandes quantités de HTML que vous souhaitez réutiliser, je vous conseillerais donc de consulter: http://api.jquery.com/jQuery.template/ qui est final, mais sera remplacé par quelque chose de mieux.

Je l'utilise dans un environnement de production et c'est génial, comme pour les plus petits morceaux de HTML que sp. dit est le meilleur moyen

0
Clarence Liu

Vous pouvez essayer ceci:

 $("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

});
0
Re_p1ay

Si jQuery est déjà disponible, utilisez-le. Si vous ne souhaitez pas l'héberger, utilisez la version hébergée de Google. En fin de compte, il appelle toujours les méthodes natives javascript createElement ou innerHTML. J'utiliserais donc les n ° 2 et n ° 3 si je devais spécifiquement cloner un élément existant sur la page.

0
Mike Sherov