Solve - Cannot read property appendChild of Undefined in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

Solve - Cannot read property appendChild of Undefined #

The "Cannot read property 'appendChild' of undefined" error occurs for 2 reasons:

  1. Calling the appendChild method on a DOM element that doesn't exist.
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.
index.js
const el = undefined; const p = document.createElement('p'); // ⛔️ Cannot read properties of undefined (reading 'appendChild') el.appendChild(p);

The error most commonly occurs after accessing an array at an index that doesn't exist, e.g. after calling getElementsByClassName.

index.js
const arr = []; const p = document.createElement('p'); // ⛔️ Cannot read properties of undefined (reading 'appendChild') arr[0].appendChild(p);

To solve the "Cannot read property 'appendChild' of null" error, make sure the DOM element on which you are calling the appendChild() method is contained in the DOM.

index.js
const elements = document.getElementsByClassName('does-not-exist'); console.log(elements); // 👉️ [] const p = document.createElement('p'); // ⛔️ Cannot read properties of undefined (reading 'appendChild') elements[0].appendChild(p);

Because we provided an invalid class name to the getElementsByClassName method, it returns an empty array-like object, so accessing the 0th index on it returns undefined, causing the error.

To solve the "Cannot read property 'appendChild' of null" error, insert the JS script tag at the bottom of the body tag, after all DOM elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ⛔️ BAD - script is ran before div exists ⛔️ --> <script src="index.js"></script> <div class="box"></div> </body> </html>

Because we placed the JS script tag above the div element, the index.js file is executed before the div element is added to the DOM.

If we now run the index.js file, the div element will not be available.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [] const p = document.createElement('p'); // ⛔️ Cannot read properties of undefined (reading 'appendChild') boxes[0].appendChild(p);

You have to place the JS script tag at the bottom of the body, after the HTML is declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box"></div> <!-- ✅ GOOD - div already exists ✅ --> <script src="index.js"></script> </body> </html>

Now you can access the div element inside of the index.js file.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [div.box] const p = document.createElement('p'); // ✅ works boxes[0].appendChild(p);

Conclusion #

The "Cannot read property 'appendChild' of undefined" error is thrown when we try to call the appendChild() method on an undefined value.

To solve the error, make sure to only call the method on valid HTML elements.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee