I am trying to use javaScript to determine if an element with a specific class name exists on an html page. The element in question is only sometimes loaded on the page.

When I use document.getElementsByClassName('element-in-question').innerHTML = "Hello"

It will work when the element exists, but when it doesn't exist, it will return as "cannot set property of innerHTML of undefined and the rest of the code will not run.

Is there a way to check if an element exists, and only modify it when it does without breaking the rest of the code? Thanks for the help

I am trying to use javaScript to determine if an element with a specific class name exists on an html page. The element in question is only sometimes loaded on the page.

When I use document.getElementsByClassName('element-in-question').innerHTML = "Hello"

It will work when the element exists, but when it doesn't exist, it will return as "cannot set property of innerHTML of undefined and the rest of the code will not run.

Is there a way to check if an element exists, and only modify it when it does without breaking the rest of the code? Thanks for the help

• javascript
• html

• You cannot set .innerHTML immediately on HTMLCollection. You are facing another problem. Correct Syntex is : Array.from(document.getElementsByClassName('element-in-question')).forEach((v)=>{v.innerHTML = "hello";}); or document.getElementsByClassNams()[index].innerHTML = ".."; – Ritesh Khandekar Commented Feb 1, 2020 at 18:31

3 Answers 3

You can also use document.querySelector which will return the first element within the document if it exists, if not, it returns null.

const targetElement = document.querySelector('.element-in-question');

if (targetElement) {
  targetElement.innerText = 'Hi there!';
}

<div class="element-in-question"></div>

Tip: If you're just adding text consider using innerText instead of innerHTML.

Just wrap you code with if statement :

const elemts = document.getElementsByClassName('element-in-question');
if(elemts.length) {
  // this actually need to be elemts[0].innerHTML 
  elemts.innerHTML = "Hello"
}

Note: document.getElementsByClassName will return array/collection of elements so if you really know that there is no other elements keep using it otherwise switch to getElementById.

as per documentation:

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object.

It's very simple with the condition IF

If you want to get elements by class, the function will return an array (a collection of all elements in the document with the specified class name), so you will check as following :

if (document.getElementsByClassName('class-in-question').length > 0) {
     // Existed
}

If you want to get an element by specified id, the function will return an objet HTML with that id, so you will check as following :

if (document.getElementById('id-in-question')) {
      // Existed
}