Kiểm tra xem một div KHÔNG tồn tại bằng javascript

92

Kiểm tra xem có tồn tại một div hay không khá đơn giản

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

}

Nhưng làm thế nào tôi có thể kiểm tra xem một div với id đã cho không tồn tại?

javascript html if-statement

— Wilson
nguồn

151

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

— Jimbo Jonny
nguồn

1

Cảm ơn nhiều. Tôi đang sử dụng cửa sổ phương thức AngularJS và Bootstrap, vì một số lý do mà JQuery không thể tìm thấy các phần tử trong cửa sổ phương thức. Vanilla JS hoạt động tốt.

— krex

75

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

Câu lệnh document.getElementById("given-id")trả về nullnếu một phần tử với given-idkhông tồn tại và nulllà sai có nghĩa là nó chuyển thành sai khi được đánh giá trong câu lệnh if. ( các giá trị giả khác )

— Esailija
nguồn

4

Xin chào Esailija, tôi nghĩ rằng bạn có thể là câu trả lời tốt nhất nếu bạn thêm chi tiết tại sao "!" hoạt động tốt. Có lẽ nói rằng nó trả về null, điều này là sai. +1 từ tôi.

— Alex KeySmith

4

Mọi người có thể google cái gì "!" nghĩa là bằng javascript hoặc bằng nhiều ngôn ngữ khác. Nó không phải là khoa học tên lửa.

— CommandZ

7

@CommandZ: Tại sao buộc mọi người phải Google nó, khi một lời giải thích nội tuyến đơn giản sẽ nhanh hơn. Bên cạnh đó, tôi tin rằng những gì Alex đang nhận được là nullđánh giá false, đó không phải là kiến thức phổ biến (C # là một ngôn ngữ mà nullkhông sai bằng sai).

— Doug S

1

@DougS nullkhông bằng để falsethậm chí so bình đẳng cưỡng chế - các cuộc gọi đến ToBoolean(null)lợi nhuậnfalse

— Esailija

10

Thử lấy phần tử có ID và kiểm tra xem giá trị trả về có là null hay không:

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

Nếu bạn đang sử dụng jQuery, bạn có thể làm:

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

— Hristo
nguồn

2

Có lý do gì bạn không thể làm !document.getElementById('foo')?

— Snuffleupagus

@ElatedOwl Có thể xảy ra trường hợp bạn có thể thực hiện thao tác trên nhiều đầu vào và bạn muốn kiểm tra xem chúng có tồn tại hay không. Nó sẽ là vô nghĩa cho đến document.getElementById()lúc đó.

— Danon

9

Kiểm tra cả mã JavaScript và JQuery của tôi:

JavaScript:

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

JQuery:

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

— Chinmay235
nguồn

4

getElementByIdtrả về nullnếu không có phần tử như vậy.

— SLaks
nguồn

1

Điều đó hoạt động với:

 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
nguồn

1

Có một giải pháp thậm chí còn tốt hơn. Bạn thậm chí không cần kiểm tra xem phần tử có trả về hay không null. Bạn chỉ có thể làm điều này:

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

Mã đó sẽ chỉ đăng nhập existsvào bảng điều khiển nếu phần tử thực sự tồn tại trong DOM.

0

Tôi làm bên dưới và kiểm tra nếu idtồn tại và thực thi chức năng nếu tồn tại.

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

— Điện tử
nguồn

0

Tất cả những câu trả lời này KHÔNG tính đến việc bạn đã hỏi cụ thể về phần tử DIV .

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

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

— sMyles
nguồn