Are you finding a way to solve the cannot read property ‘appendChild’ of undefined error in JavaScript? Let’s follow this article. We will help you to fix it.
The cause of this error
The main reason for the cannot read property ‘appendChild’ of undefined error is a logic error in your code because
- you are calling the
appendChild()method in the DOM element that does not contain DOM, or you are calling it on an undefined value. - Sometimes we insert the script tag before declaring the DOM elements, so when the program runs, it will read the script file first and then read the DOM element. It is also the one reason for this error.
Example:
The example below uses the getElementByClassName() method to get the element for the message variable. But the code has something went wrong. So the DOM element is null. Then we call the appendChild() method on undefine value. So the error will show when we try to run this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1 id="header"></h1>
<div class="message"></div>
<script src="script.js"></script>
</body>
</html>script.js
const message = document.getElementsByClassName("mesage");
const span = document.createElement("span");
span.innerText = "LearnShareIT: Marry Christmas and Happy New Year 2023";
// This is the cause of the error; call the appendChild() on the not existing DOM element
message.appendChild(span);Output
The error will show if you try to run this code.
TypeError: Cannot read property 'appendChild' of UndefinedTo Deal with The “Cannot Read Property ‘appendChild’ Of Undefined” Error
Make sure the DOM element exists and contains it in the DOM.
To avoid this error, you can use a getElementById() method to ensure the variable is valid and consistently defined. This function will return an element with a specified value and is one of the most common methods in the HTML DOM. It is used almost whenever you want to read or edit an HTML element. Then we call the appendChild() method on this element. This method will add one child node to the current node.
const message = document.getElementsByClassName("message")[0];
console.log(message);
const span = document.createElement("span");
span.innerText = "LearnShareIT: Marry Christmas and Happy New Year 2023";
// Error be solve when calling the appendChild() method on exists DOM
message.appendChild(span);Output
Make sure the DOM element be inserted before the script tag.
When the error appears, you must check the HTML file first to see if the script tag is inserted before the DOM element. Just change the position of these 2 tags and rerun the program.
Example
<!DOCTYPE html>
<html lang="en">
<body>
<!-- The DOM element must be inserted before the script tag -->
<div class="message"></div>
<script src="script.js"></script>
</body>
</html>Summary
In this article, we explained how to solve the error “cannot read property ‘appendChild’ of undefined” in JavaScript by checking the DOM element exists and ensuring the DOM element is inserted before the script tag. We always hope this information will be of some help to you.
Don’t hesitate to comment below if you have any questions. Thank you for reading!
<script src=”https://code.learnshareit.com/public/js/learnshareit-js-blog.min.js”></script>
My name is Fred Hall. My hobby is studying programming languages, which I would like to share with you. Please do not hesitate to contact me if you are having problems learning the computer languages Java, JavaScript, C, C#, Perl, or Python. I will respond to all of your inquiries.
Name of the university: HUSC
Major: IT
Programming Languages: Java, JavaScript, C , C#, Perl, Python
