Créer un élément HTML dans le DOM avec jQuery

Août 2013

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple !

Voici un petit exemple très simple qui créé un élément <div>, écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin du <body>) :

$('<div>').html('Salut !').appendTo('body');

Au premier regard, la syntaxe semble identique à celle du sélecteur, mais en réalité ça n'est pas exactement le cas, car on passe non pas un sélecteur CSS à la fonction $, mais la balise HTML de l'élément que l'on souhaite créer. jQuery est "intelligent" et arrive à détecter automatiquement qu'il ne s'agit pas d'un sélecteur, mais d'une demande de création d'objet. Ainsi on aurait tout aussi bien pu utiliser une autre syntaxe, qui produira exactement le même résultat :

$('<div></div>').html('Salut !').appendTo('body');

Mais ça n'est pas tout, on aurait tout aussi bien pu procéder en une seule étape, en définissant le contenu du div directement dans la fonction $ :

Après avoir lu gérer ses comptes avec excel vous en saurez d'avantage sur ce sujet.

$('<div>Salut !</div>').appendTo('body');

En fait, à partir du moment où on passe du code HTML au sélecteur, il passe automatiquement en mode création au lieu du mode sélection. L'énorme intérêt de cette fonctionnalité est de pouvoir créer dynamiquement des objets HTML très complexes, en procédant en plusieurs étapes, éventuellement avec des conditions, en bénéficiant du style de programmation complètement orienté objet :

var condition = true;

// Création d'un élément
var nouvelElement = $('<div>');
nouvelElement.html('Salut !');

if( condition ){
	nouvelElement.addClass('alert-error');
}

// Duplication de l'élément
var nouvelElementBis = nouvelElement.clone();
nouvelElementBis.removeClass('alert-error').html('Copie de nouvelElement');

// Ajout des éléments dans la page
$('body').prepend(nouvelElement);
nouvelElementBis.appendTo('body');

Fini de lire cette page ? allez faire un tour ici : travailler un paysage avec photoshop, ça peut vous intéresser.

Fil de lecture

0 commentaire