The “TypeError: Cannot read property ‘appendChild’ of Null” in JS is an error you will often encounter in the process of programming in the JavaScript language. This article will teach you about the cause and how to fix this error. Read on it now.
The TypeError: Cannot read property ‘appendChild’ of Null in JS
The appendChild() method in Javascript is a function that adds a DOM Node to the last position of another DOM Node.
There are two reasons for the “TypeError: Cannot read property ‘appendChild’ of Null” error to appear:
- Using method appendChild on a non-existent DOM element.
- Insert <script> tag before declaring DOM elements.
Reason 1: Using method appendChild() on a non-existent DOM element
This is the most significant cause of the “TypeError: Cannot read property ‘appendChild’ error of Null”. The following example describes this cause in detail.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="script.js"></script>
</body>
</html>const rt = document.getElementById('rt');
const h1 = document.createElement('h1');
h1.innerText = 'LearnShareIT';
console.log(h1);
rt.appendChild(h1);Output:
Uncaught TypeError: Cannot read property 'appendChild' of nullIn the above code, I used the document.getElementById() method to call the element whose id is “rt”. But this element is not contained in the DOM. In other words, the DOM element I called does not exist.
Solution 1: Make sure that the Dom element exists and is contained in the DOM
In this case, to solve the “TypeError: Cannot read property ‘appendChild’ of Null” error, you should make sure that the Dom element that you call to use the method appendChild() exists and is contained in the DOM.
In the above example, I want to add an h1 tag that says “LearnShareIT” to a div tag with id “root”. So in the JavaScrip code, I have to call the DOM element with id “root” using the document.getElementById() method.
Code:
const root = document.getElementById('root');
const h1 = document.createElement('h1');
h1.innerText = 'LearnShareIT';
console.log(h1);
root.appendChild(h1)Output:
Reason 2: Insert script tag before declaring DOM elements
The “TypeError: Cannot read property ‘appendChild’ of Null” occurs when you insert script tags before declaring DOM elements.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="script.js"></script>
<div id="root"></div>
</body>
</html>Solution 2: Insert the script tag after declaring DOM elements
Since I inserted the script tag before declaring the div element with the id “root”, the program will run the script.js file before this div element is declared and contained in the DOM.
To avoid the “TypeError: Cannot read property ‘appendChild’ of Null” error, always insert the script tag after declaring DOM elements.
Summary
This article has explained what causes the error “TypeError: Cannot read property ‘appendChild’ of Null” in JS and how to solve it. I hope the information in this article will be helpful to you. Thanks for reading!
Maybe you are interested:
- TypeError: Cannot read property ‘classList’ of Null in JS
- TypeError: Cannot read property ‘top’ of Undefined in JS
- TypeError: Cannot set properties of Undefined in JavaScript
- TypeError: Converting circular structure to JSON in JS
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
