1 septiembre, 2014

Cómo comprobar si un elemento existe en el DOM con jquery y javascript

Es muy común tener que comprobar si un elemento HTML existe en el documento que estamos manejando. Vamos a ver a continuación dos formas de hacerlo, una con JavaScript puro y la otra utilizando jQuery.

Vamos a suponer que el elemento en cuestión tiene una id que para nuestro ejemplo será elementID.

JavaScript puro

En JavaScript podemos utilizar document.getElementById:

1
2
3
if ( document.getElementById( "elementID" )) {
      //...
}

En realidad estamos intentando seleccionar el elemento con id=”elementID”. Si el elemento existe, document.getElementById() lo devuelve ( es un elemento del DOM y equivale a true ). Si no existe devuelve null que equivale a false.

Usando jQuery

En jQuery no nos basta con intentar simplemente seleccionar el elemento:

1
2
3
4
// esto no funciona!!
if ( $("#elementID") ) {
      //...
}

No funciona porque jQuery siempre devuelve un array de elementos, aunque sólo haya uno o incluso aunque no haya ninguno. Si el elemento no existe devolverá un array vacío, que equivale a true. Por lo tanto tenemos que comprobar el número de elementos devueltos:

1
2
3
if ( $("#elementID").length ) {
     //...
}

Cuando el array está vacio $(“#elementID”).length es 0 y por lo tanto false, para cualquier otro número será true.