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 pouvez accomplir avec la bibliothèque JavaScript jQuery. En utilisant jQuery, la tâche est beaucoup plus simple que l'approche équivalente avec le modèle d'objet de document (DOM). Vous le trouverez également plus flexible et expressif, plus vous utiliserez jQuery.
Pour servir un objectif, vous devez être en mesure d'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 code JavaScript avec deux objectifs principaux:
- Il simplifie les opérations JavaScript courantes.
- Il gère les problèmes de compatibilité croisée entre différents navigateurs.
Le deuxième objectif répond aux bogues, mais il aborde également les différences d'implémentation 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 <p> ou </p> que vous incluez dans un fichier HTML pour baliser le contenu du texte. Un élément est l'objet des coulisses qui représente le texte balisé. Considérez un élément comme l'équivalent DOM 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, $ () . Il s'agit d'un raccourci vers la fonction principale jQuery () . Cette fonction a trois objectifs distincts, elle:
- Correspond aux é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 du HTML comme premier paramètre, cette fonction créera un nouvel élément:
$("<a>")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 uniquement un nouvel élément prêt à être ajouté. L'élément est «non attaché», prend de la mémoire mais ne fait pas réellement partie de la page finale – pour le moment.
Ajouter du HTML plus complexe
La fonction dollar peut en fait créer plus d'un élément. En fait, il peut créer n'importe quel arbre d'éléments HTML que vous souhaitez:
$("<ul><li>one</li><li>two</li><li>three</li></ul>")Vous pouvez également utiliser ce format pour créer un élément avec des attributs:
$('<img src="photo.jpg" alt="my hometown" />')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 = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { 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 la catégorie «manipulation» .
Ajouter en tant qu'enfant d'un élément existant
$("body").append($("<p>Hello, world</p>"));
$(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 en tant que frère ou sœur d'un élément existant
$("p.last").after("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")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éé à l'aide de la méthode replaceWith () :
$('#old').replaceWith("<p>New paragraph</p>");Enrouler autour d'un élément existant
C'est un cas d'utilisation assez rare, mais vous souhaiterez peut-être inclure un élément existant dans un nouveau. Par exemple, vous pouvez avoir un élément de code que vous souhaitez encapsuler dans un pré :
$('code#n1').wrap("<pre>")Accéder à l'élément que vous avez créé
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 dénomination et n'est pas directement lié à la 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.