Muchos usuarios tienen dudas sobre cómo verificar si un elemento existe en el DOM de HTML usando jQuery. En pocas palabras, ¿cómo verificar si un elemento existe en la página de la manera más simple posible?
Hay varias formas que podemos utilizar para lograr este resultado. Una de ellas es comprobar si la propiedad “longitud” del selector de elementos devuelve un número mayor que 0.
Por ejemplo, si tenemos un HTML similar al que se muestra a continuación.
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>
Y queremos verificar si el elemento “myDiv” existe en el DOM, es decir, en la página podemos usar el siguiente código.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Simplificando el código
Dado que muchas cosas en JavaScript son verdaderas o falsas, el retorno de la propiedad “longitud” también puede considerarse verdadero o falso. El retorno es un número, 0 representa “falso” y todo lo demás representa “verdadero”.
Así que podemos simplificar el código de la siguiente manera.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Incluso eliminando el comparativo “> 0”, el valor de retorno sigue siendo el mismo.
Creando una función “existe” para jQuery
Podemos ir un poco más allá y agregar una función llamada “existe”. Esta función se puede utilizar directamente con el elemento que queremos comprobar.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
Podemos mejorar aún más y evitar que el método represente una posibilidad de encadenamiento. Cosa que no es posible en este caso. Lo haremos de la siguiente manera.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Observe que ahora pasamos el selector como argumento a la función “existe”, en lugar de simular una cadena directamente desde el objeto.
Verificando la existencia de un elemento HTML usando una matriz
Cuando usamos un selector en jQuery, devuelve una matriz de elementos. Si intentamos acceder al primer elemento de este arreglo y devuelve “indefinido”, indica que el elemento en cuestión no existe en el DOM.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Como puede ver, hay varias formas de verificar la existencia de un elemento HTML en la página. ¿Qué es lo mejor? Bueno, el que soluciona tu problema. Lo importante es que su código se está ejecutando y funcionando.