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

Question

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 chacune d'entre elles.

1 - JavaScript traditionnel

Je pense que la façon directe de le faire en JS est de construire chaque élément, de définir les 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 caractères html via jQuery

J'ai remarqué que la plupart des exemples de jQuery que je vois se contentent d'ajouter une chaîne de caractères html.
Exemple :

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

3 - .clone() de jQuery

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.

(Aussi, cela semble être un bon candidat pour un 'wiki communautaire', mais je ne suis pas trop familier avec eux. Est-ce que quelqu'un peut commenter et me faire savoir si cela devrait être ? Merci)

Answer 1

Si vous utilisez jQuery 1.4, la meilleure solution est la suivante :

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

Answer 2

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

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

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

D'abord, si l'une ou l'autre des méthodes est plus intuitive ou plus facile à écrire pour vous, je vous recommanderais de le faire.

L'autre avantage de l'utilisation de cette dernière est qu'elle est plus propre si l'élément a de nombreux enfants. Par exemple, essayez de faire 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 seconde méthode.

En ce qui concerne les performances, voici 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 tout à fait négligeables. Un bon guide pour les performances en général est également le suivant : http://www.artzstudio.com/2009/04/jquery-performance-rules/ . Le sixième conseil concerne la manipulation des DOM.

Answer 3

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

Answer 4

Si vous travaillez avec de grandes quantités de HTML que vous voulez réutiliser, je vous suggère de regarder : http://api.jquery.com/jQuery.template/ qui est définitif, mais qui sera remplacé par quelque chose de mieux.

Je l'utilise dans un environnement de production et c'est génial. Pour les petits morceaux de html, ce que Sp. a dit est la meilleure solution.

Answer 5

Cloner le contenu existant...

var $html = $template.clone();     $html.find(''); ///after change content...  

Le contenu du clone est composé de propriétés "DOM". Ensuite, vous pouvez changer ces balises, propriétés, valeurs, puis les ajouter.