Why does jQuery or a DOM method such as getElementById not find the element

Question

What are the possible reasons for document.getElementById, $("#id") or any other DOM method / jQuery selector not finding the elements?

Example problems include:

• jQuery silently failing to bind an event handler
• jQuery "getter" methods (.val(), .html(), .text()) returning undefined
• A standard DOM method returning null resulting in any of several errors:

Uncaught TypeError: Cannot set property '...' of null
Uncaught TypeError: Cannot set properties of null (setting '...')
Uncaught TypeError: Cannot read property '...' of null
Uncaught TypeError: Cannot read properties of null (reading '...')

The most common forms are:

Uncaught TypeError: Cannot set property 'onclick' of null
Uncaught TypeError: Cannot read property 'addEventListener' of null
Uncaught TypeError: Cannot read property 'style' of null

Answer 1

At the moment the script is executed, the element does not exist yet and getElementById will return null . The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.