Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

# Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

The error "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'" occurs when you call the appendChild() method with a value that is not a DOM Node.

To solve the error, make sure to pass a node to the appendChild() method.

failed to execute appendchild on node

Here is the complete error message.

shell

Copied!
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Here is an example of how the error occurs.

This is the code for the index.html file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

// ⛔️ Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
box.appendChild('<p>google.com</p>');

The issue in the code sample is that we called the appendChild() method with a string instead of a DOM Node.

To solve the error, make sure to call the appendChild() method with a DOM node instead.

index.js

Copied!
const box = document.getElementById('box');

const paragraph = document.createElement('p');

paragraph.innerHTML = `google.<b>com</b>`;

box.appendChild(paragraph);

appendchild method called successfully

The code for this article is available on GitHub

We used the document.createElement() method to create an element and set the element's innerHTML.

The document.createElement method takes the type of element you want to create (e.g. div, span or p).

The last step is to pass the DOM node to the appendChild() method.

The appendChild() method adds a node to the end of the list of children of the element on which it was called.

If the supplied node is a reference to an existing node in the document, then the appendChild() method moves the element from its current position to the new position.

The appendChild() method takes a node (a DOM element) as a parameter.

If you try to call the method with a string or any other value, the error is raised.

You can use the document.createElement() method to create a DOM element and pass the result to the appendChild() method.

The error commonly occurs when you pass an array of DOM elements to the appendChild() method.

Here is an example.

index.js

Copied!
const box = document.getElementById('box');

const paragraph1 = document.createElement('p');
paragraph1.innerHTML = `google.<b>com</b>`;

const paragraph2 = document.createElement('p');
paragraph2.innerHTML = `example.<b>com</b>`;

const arrayOfElements = [paragraph1, paragraph2];

// ⛔️ Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
box.appendChild(arrayOfElements);

The code for this article is available on GitHub

We created 2 p elements.
Wrapped the elements in an array.
Passed the array to the appendChild() method.

The appendChild() method cannot be called with an array, so you have 2 options in this case:

Access the array at a specific index, e.g. 0 to get the first element.
Use a for...of loop to call the appendChild method with each element.

# Calling the `appendChild()` method with the first element from an array

The following code sample calls the appendChild() method with the first element from the array.

index.js

Copied!
const box = document.getElementById('box');

const paragraph1 = document.createElement('p');
paragraph1.innerHTML = `google.<b>com</b>`;

const paragraph2 = document.createElement('p');
paragraph2.innerHTML = `example.<b>com</b>`;

const arrayOfElements = [paragraph1, paragraph2];

box.appendChild(arrayOfElements[0]);

appendchild method called successfully

The code for this article is available on GitHub

We accessed the array at index 0 to get the first array element.

JavaScript indices are zero-based, so the first element in an array has an index of 0 and the last has an index of array.length - 1.

# Calling the `appendChild()` method with each element from an array

And here is an example that calls the appendChild() method with each element from an array.

index.js

Copied!
const box = document.getElementById('box');

const paragraph1 = document.createElement('p');
paragraph1.innerHTML = `google.<b>com</b>`;

const paragraph2 = document.createElement('p');
paragraph2.innerHTML = `example.<b>com</b>`;

const arrayOfElements = [paragraph1, paragraph2];

for (const element of arrayOfElements) {
  box.appendChild(element);
}

call append child with all elements from an array

The code for this article is available on GitHub

We used a for...of loop to iterate over the array and called the appendChild() method with each element from the array.

# Using the `insertAdjacentHTML` method instead of `appendChild`

An alternative approach is to use the insertAdjacentHTML method instead of appendChild.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.insertAdjacentHTML('beforeend', '<p>google.<b>com</b></p>');

using insert adjacent html method instead

The code for this article is available on GitHub

The insertAdjacentHTML() method takes the following 2 parameters:

position - the position relative to the element where the HTML should be inserted. Can be one of the following:
- beforebegin - before the element itself.
- afterbegin - just inside the element, before its first child.
- beforeend - just inside the element, after its last child.
- afterend - after the element itself.
text - the string to be parsed as HTML and inserted into the DOM.

We set the position argument to beforeend to insert the HTML string right before the end of the div element.

Notice that the insertAdjacentHTML() can be passed an HTML string as its second argument.

Passing an HTML string is not possible when using the appendChild() method.

index.js

Copied!
const box = document.getElementById('box');

box.insertAdjacentHTML('beforeend', '<p>google.<b>com</b></p>');

The code for this article is available on GitHub

It should be noted that you shouldn't append HTML that is from user-generated input without escaping it.

This could leave your code susceptible to cross-site scripting attacks.

I've also written articles on:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'