This tutorial will give you the reasons and solutions to fix the “TypeError: appendChild is not a function” in JavaScript. Let’s read it now.
What causes the error “TypeError: appendChild is not a function” in JavaScript?
AppendChild in Javascript is a function that appends a DOM element node (called a node) as the last child of an element.
There are two main causes of the error “TypeError: Cannot read property ‘appendChild’ of Null”:
- Call the method on something that is not an element.
- You are misspelling appendChild – it’s case-sensitive.
How to fix this error?
Call the method on something that is not an element
The “TypeError: appendChild is not a function” in JavaScript mostly happens because of this reason. For example:
// Declare an array instead of a DOM element
const array = [];
// Create a new DOM element to append
const p = document.createElement('p');
p.innerText = 'Learn ShareIT';
// Using the appendChild method on an array
array.appendChild(p)
In the example above, we create a new array instead of an element. In other words, the variable calling the appendChild() method is not of type DOM element. Therefore, the error happens. To solve the “TypeError: appendChild is not a function” in JavaScript”, it would help if you check that the variable that you call the method appendChild() is of type DOM Document (of course, not array type) and must exist in your HTML Document.
For example, append a child not whose <p> tag on a node whose <h1> tag :
// Create two element whose h1 and p tags
const h1 = document.createElement('h1')
const p = document.createElement('p');
p.innerText = 'Learn ShareIT';
// Append the p tag to the h1’s children
h1.appendChild(p)
Output:
<p>Learn Share IT</p>If you think that you are calling the method on the correct type of DOM Document. Please check it again, because most programmers called it on something that is array-like as a result of an another function such as getElementsByTagName or getElementsByClassName:
// Get elements whose tag name is body
const array = document.getElementsByTagName('body');
// Create a new DOM element to append
const p = document.createElement('p');
p.innerText = 'Learn ShareIT';
// Using the appendChild method on an array
array.appendChild(p)Why did the error happen? It is because the method you have used to get the elements in the first line always returns an array instead of an element as you supposed. In this case, all you have to do is picking an element in that array instead of the whole array to call the method appendChild:
// Get elements whose tag name is body
const array = document.getElementsByTagName('body');
// Create a new DOM element to append
const p = document.createElement('p');
p.innerText = 'Learn ShareIT';
// Using the appendChild method on the first element of the array
array[0].appendChild(p)Output:
<p>Learn Share IT</p>You are misspelling appendChild method name()
This error also may happen when you misspell the appendChild name because it’s case sensitive. For example:
// Create two element whose h1 and p tags
const h1 = document.createElement('h1')
const p = document.createElement('p');
p.innerText = 'Learn ShareIT';
// Append the p tag to the h1’s children but wrong misspelled the function
h1.appendchild(p)
Because JavaScript is a case-sensitive language, using a function with the misspelled name may lead to errors. Therefore, we suggest you check your function name again in all lines of code which used that function. Remember that the append is lowercase and Child has one head capital letter C.
Summary
This article has explained what causes the error “TypeError: appendChild is not a function” in JavaScript and how to solve it. We hope the information in this article will be helpful to you. Read more about a related tutorial to this error in TypeError: Cannot read property ‘appendChild’ of Null in JS – How to fix it?
Maybe you are interested:
- “TypeError: Failed to fetch and CORS” in JavaScript
- “TypeError: flat is not a function” in JavaScript
- TypeError: console.log(…) is not a function in JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
