How to find if div with specific id exists in jQuery?

Dynamically added elements

Dynamically generated elements? Tricky but manageable. Ensure their existence before any action. Use .on() for event binding that doesn't fail you:

$(document).on('click', '#dynamicID', function() {
    console.log("I'm a dynamic div, and I approve this event.");
});


Launch a friendly alert when an impersonator tries to create a duplicate ID:

if ($('#newDynamicID').length) {
    alert('Hold on! A div with this ID already exists. Impostor alert!');
} else {
    console.log('All clear! The coast is free for a new div.');
}


Clean removal of elements

Meticulously remove an element. Specify related ID while removing to avoid unintended losses:

$('.mini-close').on('click', function() {
    var parentDivID = $(this).data('target-div');
    $('#' + parentDivID).remove();
    console.log('Div dismissed. Felt like a boss.');
});


Detecting without jQuery

Vanilla JS can do the job too. No jQuery, no worries! Use document.getElementById(name):

if (document.getElementById('divID') != null) {
    console.log("The div's in the house!");
} else {
    console.log("It appears our div has ghosted us.");
}


For a more streamlined approach, try:

var exists = !!document.getElementById('divID');
console.log('Does the div exist? ' + (exists ? 'Yes' : 'No'));


Handling div existence

Here are some pro tips when dealing with div existence checks:

Conditional content rendering

If the div exists, render extra content conditionally:

if ($('#myDiv').length) {
    $('#myDiv').show();
    console.log("Surprise! There's more.");
}


Choose variable names wisely

Avoid ID theft (naming confusion) by choosing clear and distinct variables:

var $myElement = $('#myElement');
if ($myElement.length) {
    console.log("Found it! No ID theft here.");
}


Test as much as you can

It's crucial to debug. Isolate, test, and validate your snippets:

if ($('#testDivID').length) {
    console.log('It lives! Frankenstein would be proud.');
}
