Sprawdź, czy nie istnieje div z javascript

92

Sprawdzenie, czy istnieje element DIV, jest dość proste

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

}

Ale jak mogę sprawdzić, czy element div o podanym identyfikatorze nie istnieje?

javascript html if-statement

— Wilson
źródło

152

var myElem = document.getElementById('myElementId');
if (myElem === null) alert('does not exist!');

— Jimbo Jonny
źródło

1

Wielkie dzięki. Używam okien modalnych AngularJS i Bootstrap, z jakiegoś powodu JQuery nie mógł znaleźć elementów w oknie modalnym. Vanilla JS działała dobrze.

— krex

75

if (!document.getElementById("given-id")) {
//It does not exist
}

Instrukcja document.getElementById("given-id")zwraca, nulljeśli element z given-idnie istnieje i nulljest fałszywy, co oznacza, że przekłada się na fałsz, gdy jest oceniany w instrukcji if. ( inne fałszywe wartości )

— Esailija
źródło

4

Cześć Esailija, myślę, że możesz być najlepszą odpowiedzią, jeśli dodasz szczegóły, dlaczego „!” działa dobrze. Być może mówiąc, że zwraca wartość null, co jest fałszywe. +1 ode mnie.

— Alex KeySmith

4

Ludzie mogliby znaleźć w Google, co „!” oznacza w javascript lub w wielu innych językach. To nie jest fizyka jądrowa.

— CommandZ

7

@CommandZ: Po co zmuszać ludzi do korzystania z Google, skoro proste wyjaśnienie w tekście byłoby szybsze. Poza tym uważam, że to, do czego Alex zmierza, polega na tym, że nullwartościuje false, co nie jest powszechną wiedzą (C # to język, w którym nullnie równa się fałszowi).

— Doug S,

1

@DougS nullnie równa się falsenawet w przymusowym porównaniu równości - wezwanie do ToBoolean(null)powrotufalse

— Esailija

10

Spróbuj pobrać element z identyfikatorem i sprawdź, czy wartość zwracana jest pusta:

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

Jeśli używasz jQuery, możesz:

$('#some_nonexistent_id').length === 0

— Hristo
źródło

2

Czy jest jakiś powód, dla którego nie mogłeś po prostu zrobić !document.getElementById('foo')?

— Snuffleupagus

@ElatedOwl Może się zdarzyć, że możesz wykonać operację na wielu wejściach i chcesz sprawdzić, czy one istnieją. Wtedy byłoby to bezcelowe document.getElementById().

— Danon

10

Sprawdź mój kod JavaScript i JQuery:

JavaScript:

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

JQuery:

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

— Chinmay235
źródło

4

getElementByIdzwraca, nulljeśli nie ma takiego elementu.

— SLaks
źródło

1

Działa z:

 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
źródło

1

Jest jeszcze lepsze rozwiązanie. Nie musisz nawet sprawdzać, czy element zwraca null. Możesz to po prostu zrobić:

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

Ten kod będzie logował się existsdo konsoli tylko wtedy, gdy element faktycznie istnieje w DOM.

0

Robię poniżej i sprawdzam, czy idistnieją i wykonuję funkcję, jeśli istnieją.

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

— Cyber
źródło

0

Wszystkie te odpowiedzi NIE uwzględniają tego, że pytałeś konkretnie o element DIV .

document.querySelector("div#the-div-id")

@see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

— sMyles
źródło