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:
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:
// 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:
if ( $("#elementID").length ) {
//...
}
Cuando el array está vacio $("#elementID").length es 0 y por lo tanto false, para cualquier otro número será true.
Excelente! Gracias
ResponderEliminarGracias!!!, Me sirvió de mucho ;)
ResponderEliminarMuchas gracias, me fue muy útil.
ResponderEliminarGracias
ResponderEliminarLógica Basica como no se me ocurrio. muchas gracias!!!
ResponderEliminarGenial, mejor explicado imposible! :) Gran aporte.
ResponderEliminarMUY BIEN
ResponderEliminarExcelente.
ResponderEliminarTambién me gustaría agregar unas funciones adicionales, con el permiso de uds. Las mismas son para agregar, eliminar y verificar la existencia de un elemento, según su id. Allí se las dejo:
ResponderEliminarfunction crearElemento(){
if(!existeElementoHTML("nuevoElemento")){
var a = document.createElement("p");
a.innerHTML = "NUEVO ELEMENTO CREADO POR JS.";
a.setAttribute("id", "nuevoElemento");
var CAPA = document.getElementById('miCapa');
CAPA.appendChild(a);
}
}
function eliminarElemento(idElemento){
if(existeElementoHTML(idElemento)){
var elemento = document.getElementById(idElemento);
elemento.parentNode.removeChild(elemento);
}else{
alert("No existe el elemento "+idElemento);
}
}
function existeElementoHTML(idElemento){
var salida = false;
if(document.getElementById(idElemento)){
salida = true;
}
return salida;
}
function validaExiste(idElemento){
if(existeElementoHTML(idElemento)){
alert("E X I S T E ! ! . . ;-)");
}else{
alert("N O E X I S T E ! ! . :-(");
}
}
Muy útil y fácil, muchas gracias.
ResponderEliminarsuper útil gracias!
ResponderEliminarPabl.o no tubo la ocurrencia de colocar un ejemplo de verdad, que sea entendible, sin embargo José Delgado que es un participante como nosotros hizo lo que hacia falta verdaderamente,... un ejemplo.
ResponderEliminarAsi son las diferencias individuales.
No jodas, limosnero y con garrote
EliminarAlguien tiene idea porque tengo este error: Describo la situación; en el código chequeo si existe el formulario, si existe cargo el objeto,
ResponderEliminarif ( $("#frmLogin").length ) {
console.log('existe');
const inputs = document.querySelectorAll('#frmLogin input');
alert('cargando en linea ...:'+inputs);
}
pero cuando voy leer el objeto mas abajo, da error
inputs.forEach((input) => {
input.addEventListener('keyup', validarFrmLogin);
}
SIN ERROR AL COMENTAR EL IF:
Si directamente no chequeo con el If (lo comento)
//if ( $("#frmLogin").length ) {
console.log('existe');
const inputs = document.querySelectorAll('#frmLogin input');
alert('cargando en linea 12:'+inputs);
//}
Cargo sin problemas el objeto:
inputs.forEach((input) => {
input.addEventListener('keyup', validarFrmLogin);
}
Mi consulta:
Como poder cargar desde un mismo archivo.js, distintos formularios, en función de la página que visito.
Mi solución, (no me parece funcional)
Crear un archivo.js para cada página que visito y directamente ya no compruebo con If la existencia del elemento.
Esta solución no me parece la apropiada, humildemente hay algo que estoy haciendo mal.