Vérifiez si un div n'existe PAS avec javascript

92

Vérifier si un div existe est assez simple

if(document.getif(document.getElementById('if')){

}

Mais comment puis-je vérifier si un div avec l'identifiant donné n'existe pas?

Wilson
la source

Réponses:

151
var myElem = document.getElementById('myElementId');
if (myElem === null) alert('does not exist!');
Jimbo Jonny
la source
1
Merci beaucoup. J'utilise les fenêtres modales AngularJS et Bootstrap, pour une raison quelconque, JQuery n'a pas pu trouver d'éléments dans la fenêtre modale. Vanilla JS a bien fonctionné.
krex
75
if (!document.getElementById("given-id")) {
//It does not exist
}

L'instruction document.getElementById("given-id")retourne nullsi un élément avec given-idn'existe pas et nullest faux, ce qui signifie qu'il se traduit par faux lorsqu'il est évalué dans une instruction if. ( autres valeurs fausses )

Esailija
la source
4
Salut Esailija, je pense que tu pourrais être la meilleure réponse si tu ajoutais des détails sur pourquoi "!" fonctionne bien. Peut-être en disant qu'il renvoie null, ce qui est faux. +1 de moi.
Alex KeySmith
4
Les gens pourraient google quoi "!" signifie en javascript ou dans de nombreuses autres langues. Ce n'est pas sorcier.
CommandZ
7
@CommandZ: Pourquoi forcer les gens à le faire sur Google, alors qu'une simple explication en ligne serait plus rapide. De plus, je crois que ce à quoi Alex veut en venir, c'est qu'il nullévalue false, ce qui n'est pas de notoriété publique (C # est un langage où il nulln'est pas faux).
Doug S
1
@DougS nulln'est pas égal à falsemême dans la comparaison coercitive d'égalité - l'appel aux ToBoolean(null)retoursfalse
Esailija
10

Essayez d'obtenir l'élément avec l'ID et vérifiez si la valeur de retour est nulle:

document.getElementById('some_nonexistent_id') === null

Si vous utilisez jQuery, vous pouvez faire:

$('#some_nonexistent_id').length === 0
Hristo
la source
2
Y a-t-il une raison pour laquelle vous ne pouvez pas simplement faire !document.getElementById('foo')?
Snuffleupagus
@ElatedOwl Il peut arriver que vous puissiez effectuer des opérations sur de nombreuses entrées et que vous souhaitiez vérifier si elles existent. Ce serait inutile document.getElementById()alors.
Danon
9

Vérifiez à la fois mon code JavaScript et JQuery:

JavaScript:

if (!document.getElementById('MyElementId')){
    alert('Does not exist!');
}

JQuery:

if (!$("#MyElementId").length){
    alert('Does not exist!');
}
Chinmay235
la source
4

getElementByIdretourne nulls'il n'y a pas de tel élément.

SLaks
la source
1

Cela fonctionne avec:

 var element = document.getElementById('myElem');
 if (typeof (element) != undefined && typeof (element) != null && typeof (element) != 'undefined') {
     console.log('element exists');
 }
 else{
     console.log('element NOT exists');
 }
Ema.H
la source
1

Il existe une solution encore meilleure. Vous n'avez même pas besoin de vérifier si l'élément revient null. Vous pouvez simplement faire ceci:

if (document.getElementById('elementId')) {
  console.log('exists')
}

Ce code ne se connectera existsà la console que si l'élément existe réellement dans le DOM.


la source
0

Je fais ci-dessous et vérifie s'il idexiste et exécute la fonction si elle existe.

var divIDVar = $('#divID').length;
if (divIDVar === 0){ 
    console.log('No DIV Exist'); 
} else{  
    FNCsomefunction(); 
}   
Cyber
la source