How to find if element with specific id exists or not

JavascriptDom

Javascript Problem Overview


In my JavaScript I want to check whether the element with specific id is exist or not, I tried it with 2 ways

1).

var myEle = document.getElementById("myElement");
if(myEle  == null){
   var myEleValue= document.getElementById("myElement").value;
}

2).

if(getElementById("myElement")){
    var myEleValue= document.getElementById("myElement").value;
}

but it gives same error as below -

> Object expected

Javascript Solutions


Solution 1 - Javascript

 var myEle = document.getElementById("myElement");
    if(myEle){
        var myEleValue= myEle.value;
    }

the return of getElementById is null if an element is not actually present inside the dom, so your if statement will fail, because null is considered a false value

Solution 2 - Javascript

You can simply use if(yourElement)

var a = document.getElementById("elemA");
var b = document.getElementById("elemB");

if(a)
  console.log("elemA exists");
else
  console.log("elemA does not exist");
  
if(b)
  console.log("elemB exists");
else
  console.log("elemB does not exist");

<div id="elemA"></div>

Solution 3 - Javascript

getElementById

Return Value: An Element Object, representing an element with the specified ID. Returns null if no elements with the specified ID exists see: https://www.w3schools.com/jsref/met_document_getelementbyid.asp

Truthy vs Falsy

In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, "", null, undefined, and NaN). see: https://developer.mozilla.org/en-US/docs/Glossary/Truthy

When the dom element is not found in the document it will return null. null is a Falsy and can be used as boolean expression in the if statement.

var myElement = document.getElementById("myElement");
if(myElement){
  // Element exists
}

Solution 4 - Javascript

document.getElementById('yourId')

is the correct way.

the document refers the HTML document that is loaded in the DOM.

and it searches the id using the function getElementById() which takes a parameter of the id of an element

Solution will be :

var elem = (document.getElementById('myElement'))? document.getElementById('myElement').value : '';

/* this will assign a value or give you and empty string */

Solution 5 - Javascript

You need to specify which object you're calling getElementById from. In this case you can use document. You also can't just call .value on any element directly. For example if the element is textbox .value will return the value, but if it's a div it will not have a value.

You also have a wrong condition, you're checking

> if (myEle == null)

which you should change to

> if (myEle != null)

var myEle = document.getElementById("myElement");
if(myEle != null) { 
    var myEleValue= myEle.value; 
}

Solution 6 - Javascript

Use typeof for elements checks.

if(typeof(element) === 'undefined')
{
// then field does not exist
}

Solution 7 - Javascript

this works for me to check if element exits

let element = document.getElementById("element_id");
if (typeof(element) !== 'undefined' && element!== null)
{
    //content
}

Solution 8 - Javascript

if( document.getElementById("myElement") ){
   console.log('exists');
}

or shorter way

if( document.querySelector("#myElement") ){}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmita PatilView Question on Stackoverflow
Solution 1 - JavascriptMr.BrunoView Answer on Stackoverflow
Solution 2 - JavascriptWeedozeView Answer on Stackoverflow
Solution 3 - JavascriptkhoekmanView Answer on Stackoverflow
Solution 4 - JavascriptRahil LakhaniView Answer on Stackoverflow
Solution 5 - JavascriptArminView Answer on Stackoverflow
Solution 6 - JavascriptDebbie KurthView Answer on Stackoverflow
Solution 7 - Javascriptiohan sandovalView Answer on Stackoverflow
Solution 8 - JavascriptFarzad.KamaliView Answer on Stackoverflow