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.