Comment créer et manipuler des éléments HTML en jQuery

Pour créer un élément dans une page web, on utilise une méthode en précisant le type de balises que l'on souhaite.

Il est possible de créer et de manipuler des éléments HTML en JavaScript. Pour effectuer ces traitements, on utilise les méthodes fournies par le DOM. L'objet document fourni par le DOM permet de manipuler la structure HTML de la page. Pour créer un élément, on utilise la méthode createElement en précisant le type de balises que l'on souhaite entre parenthèses. Si vous utilisez la bibliothèque JavaScript jQuery, le simple fait de préciser dans le sélecteur jQuery la balise permet de créer un élément. Exemples de création d'élément :

var div = document.createElement(div); //Méthode de création d'un élément en JavaScript pur
var div = jQuery(<div></div>); //Méthode de création d'un élément avec jQuery

Si vous souhaitez ajouter un autre élément, il faudra en JavaScript pur créer cet élément puis utiliser la méthode appendChild() qui permet d'ajouter un élément à un autre comme étant son enfant. Avec la bibliothèque jQuery, la méthode append() permet à la fois de créer un élément et de l'ajouter. Exemple :

//En Javascript pur :
var table = document.createElement(table);
div.appendChild(table);
// Avec jQuery :
jQuery(div).append(<table></table>);

Si vous développez un programme qui crée énormément d'éléments, il est bon de savoir que la méthode document.createElement() est plus rapide que le code équivalent en jQuery. Bien que la différence à partir de la version 1.3 soit très faible, pour les versions antérieures il est beaucoup plus rapide d'utiliser le code JavaScript natif.

JQuery