Solve - cloneNode is not a function Error in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Glen Jackson

Solve - cloneNode is not a function Error #

The "cloneNode is not a function" error occurs for multiple reasons:

  • calling the cloneNode() method on a value that is not a DOM element.
  • placing the JS script tag above the code that declares the DOM elements.
  • misspelling cloneNode (it's case sensitive).

typeerror clonenode is not a function

Here is an example of how the error occurs.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box"> <p>Box 0</p> <p>Box 1</p> </div> <div class="box"> <p>Box 2</p> <p>Box 3</p> </div> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>
Notice that the JS script tag is placed at the bottom of the body tag. Had we placed the JS script tag above the code that declares the DOM elements, they wouldn't be accessible in the index.js file.

And here is the related JavaScript code.

index.js
const boxes = document.getElementsByClassName('box'); // โ›”๏ธ TypeError: cloneNode is not a function const box = boxes.cloneNode(true);

We called the Node.cloneNode() method on a NodeList and not a DOM element, so we got the error back.

To solve the "cloneNode is not a function" error, make sure to only call the cloneNode method on valid DOM elements and place the JS script tag at the bottom of the body, after the DOM elements have been declared.

index.js
const boxes = document.getElementsByClassName('box'); const box = boxes[0].cloneNode(true); console.log(box); // ๐Ÿ‘‰๏ธ div.box

By accessing the element at index 0 of the NodeList, we got back a DOM element, on which we can safely call the cloneNode method.

The only parameter the cloneNode method takes is a boolean. If set to true, we clone the node and its whole subtree, otherwise only the node is cloned.

If the element you're calling the method on sometimes does not exist, you can conditionally check if the element is there before calling the cloneNode method on it.

For example, a basic DOM element has a type of object, so we can check if the value is an object and contains the cloneNode property before calling the method.

index.js
const box = null; if (typeof box === 'object' && box !== null && 'cloneNode' in box) { const clone = box.cloneNode(true); }

Our if condition uses the logical AND (&&) operator, so for the if block to run, all of the conditions have to be met.

We first check if the box variable stores a value with a type of object, because DOM elements have a type of object.

Then we check if the variable is not equal to null. Unfortunately, if you check the type of null - console.log(typeof null), you will get an "object" value back, so we have to make sure the value is not null.

The last thing we check for is that the object contains the cloneNode property.

Then we know we can safely call the cloneNode method on the object.

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