Apprenez à créer un élément dans jQuery

La création d'un nouvel élément est l'une des tâches les plus élémentaires que vous puissiez accomplir avec la bibliothèque JavaScript jQuery. En utilisant jQuery, la tâche est beaucoup plus simple que l'approche équivalente avec le Document Object Model (DOM). Vous le trouverez également plus flexible et expressif, plus vous utilisez jQuery.

Pour servir un objectif, vous devez pouvoir ajouter votre élément à une page Web. Apprenez à ajouter un nouvel élément de liste ou à remplacer un paragraphe par un nouveau contenu à l'aide de jQuery.

Qu'est-ce que jQuery ?

La bibliothèque jQuery est une collection de JavaScript code avec deux objectifs principaux:

• Il simplifie les opérations JavaScript courantes.
• Il gère les problèmes de compatibilité croisée JavaScript entre différents navigateurs.

Le deuxième objectif concerne les bugs, mais il traite également des différences de mise en œuvre entre les navigateurs. Les deux objectifs sont moins nécessaires qu'auparavant, car les navigateurs s'améliorent avec le temps. Mais jQuery peut toujours être un outil précieux.

Qu'est-ce qu'un élément ?

Un élément est parfois appelé balise. Bien que les deux soient souvent utilisés de manière interchangeable, il existe une différence subtile. Une balise fait référence au littéral ou

 vous incluez dans un fichier HTML pour baliser le contenu du texte. Un élément est l'objet en coulisses qui représente le texte balisé. Considérez un élément comme le DOM contrepartie des balises HTML.

Comment créer un nouvel élément à l'aide de jQuery

Comme la plupart des opérations jQuery, la création d'un élément commence par la fonction dollar, $(). Ceci est un raccourci vers le noyau jQuery() fonction. Cette fonction a trois objectifs distincts, elle:

• Correspond à des éléments, généralement ceux qui existent déjà dans le document
• Crée de nouveaux éléments
• Exécute une fonction de rappel lorsque le DOM est prêt

Lorsque vous passez une chaîne contenant HTML comme premier paramètre, cette fonction créera un nouvel élément:

$("")

Cela renvoie un objet jQuery spécial qui contient une collection d'éléments. Dans ce cas, il y a un seul objet représentant un élément "a" que nous venons de créer.

La chaîne doit ressembler à du HTML pour distinguer cette action des éléments correspondants. En pratique, cela signifie que la chaîne doit commencer par un <. Vous ne pouvez pas ajouter de texte brut au document à l'aide de cette méthode.

Il est important de comprendre que cela n'ajoute pas l'élément à votre document, cela crée seulement un nouvel élément prêt à être ajouté. L'élément est « non attaché », occupant de la mémoire mais ne faisant pas encore partie de la page finale.

Ajout de HTML plus complexe

La fonction dollar peut en fait créer plusieurs éléments. En fait, il peut construire n'importe quel arbre d'éléments HTML que vous voulez:

$("

une
deux
Trois
")

Vous pouvez également utiliser ce format pour créer un élément avec des attributs:

$('')

Comment définir des attributs sur un nouvel élément

Vous pouvez créer un nouvel élément jQuery et définir ses attributs sans avoir à créer vous-même la chaîne HTML complète. Ceci est utile si vous générez des valeurs d'attribut de manière dynamique. Par exemple:

photo = nouvelle Date().getHours() > 12? "après-midi.jpg": "matin.jpg" ;
$("", { src: photo });

Comment ajouter un élément

Une fois que vous avez créé un nouvel élément, vous pouvez l'ajouter au document de plusieurs manières différentes. La documentation jQuery rassemble ces méthodes sous le catégorie « manipulation ».

Ajouter en tant qu'enfant d'un élément existant

$("corps").append($("
Bonjour le monde
"));
$(document.body).append($el);

Vous pouvez utiliser cette méthode, par exemple, pour ajouter un nouvel élément de liste à la fin d'une liste.

Ajoutez-le comme frère d'un élément existant

$("p.last").after("
Un nouveau paragraphe
")
$("ul li: first").before("
nouvel article
")

C'est un bon choix si, par exemple, vous souhaitez ajouter un nouveau paragraphe au milieu de deux autres.

Remplacer un élément existant

Vous pouvez échanger un élément existant contre un élément nouvellement créé en utilisant le remplacer par() méthode:

$('#old').replaceWith("
Nouveau paragraphe
");

Enrouler autour d'un élément existant

Il s'agit d'un cas d'utilisation assez rare, mais vous souhaiterez peut-être inclure un élément existant dans un nouveau. Par exemple, vous pourriez avoir un code élément que vous souhaitez envelopper dans un pré:

$('code#n1').wrap("
")

Accéder à l'élément que vous avez créé

Les $() La fonction renvoie un objet jQuery. Ceci est utile pour les opérations de suivi:

$el = $("p");
$('body').append($el);

Notez que, par convention, les programmeurs jQuery nomment souvent les variables jQuery avec un signe dollar en tête. Il s'agit simplement d'un schéma de nommage et n'est pas directement lié au $() fonction.

Création d'éléments à l'aide de jQuery

Bien que vous puissiez manipuler le DOM à l'aide de fonctions JavaScript natives, jQuery le rend beaucoup plus facile. Il est toujours très utile d'avoir une bonne compréhension du DOM, mais jQuery rend son travail beaucoup plus agréable.

Le héros caché des sites Web: comprendre le DOM

Vous apprenez la conception de sites Web et souhaitez en savoir plus sur le modèle objet de document? Voici ce que vous devez savoir sur le DOM.

Lire la suite

A propos de l'auteur