De nombreux utilisateurs ont des doutes sur la façon de vérifier si un élément existe dans le DOM HTML à l’aide de jQuery. En quelques mots, comment vérifier si un élément existe sur la page de la manière la plus simple possible ?
Il y a plusieurs façons que nous pouvons utiliser pour arriver à ce résultat. L’une d’elles consiste à vérifier si la propriété « length » du sélecteur d’élément renvoie un nombre supérieur à 0.
Par exemple, si nous avons un code HTML similaire à celui présenté ci-dessous.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
Et nous voulons vérifier si l’élément “myDiv” existe dans le DOM, c’est-à-dire que sur la page, nous pouvons utiliser le code suivant.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Simplifier le code
Étant donné que beaucoup de choses en JavaScript sont vraies ou fausses, le retour de la propriété “length” peut également être considéré comme vrai ou faux. Le retour est un nombre, 0 représente “faux” et tout le reste représente “vrai”.
Nous pouvons donc simplifier le code comme suit.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Même en supprimant le comparatif “> 0”, la valeur de retour reste la même.
Création d’une fonction “existe” pour jQuery
On peut aller un peu plus loin et ajouter une fonction nommée “existe”. Cette fonction peut être utilisée directement avec l’élément que nous voulons vérifier.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
On peut encore s’améliorer et éviter que la méthode ne représente une possibilité d’enchaînement. Ce qui n’est pas possible dans ce cas. Nous le ferons comme suit.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Notez que nous passons maintenant le sélecteur comme argument à la fonction “existe”, au lieu de simuler une chaîne directement à partir de l’objet.
Vérification de l’existence d’un élément HTML à l’aide d’un tableau
Lorsque nous utilisons un sélecteur dans jQuery, il renvoie un tableau d’éléments. Si nous essayons d’accéder au premier élément de ce tableau et qu’il renvoie “undefined”, cela indique que l’élément en question n’existe pas dans le DOM.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Comme vous pouvez le voir, il existe plusieurs façons de vérifier l’existence d’un élément HTML sur la page. Quel est le meilleur? Eh bien, celui qui résout votre problème. L’important est que votre code s’exécute et fonctionne.