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

Meaning

appendChild, insertBefore, replaceChild and similar need real Node objects. The usual cause is a failed lookup (getElementById returned null because the element did not exist yet) or passing a string where an element is needed (use append() or insertAdjacentHTML).

Common causes

• document.getElementById / querySelector returned null (wrong id, script runs before the DOM is ready)
• Passing a string, number or array instead of an element
• Passing a jQuery object ($('#x')) instead of the DOM element ($('#x')[0])
• Element created in another document/iframe
• Typo in a variable name

Detailed fix by platform

Code examples

document.addEventListener('DOMContentLoaded', () => {
  const list = document.querySelector('#list');
  if (!list) return;                           // avoid the TypeError
  const li = document.createElement('li');
  li.textContent = 'New item';
  list.appendChild(li);                        // both arguments are real Nodes
});

How to diagnose

1. Value — Is the argument null or the wrong type?
2. Timing — Is the DOM ready?
3. Selector — Does the id/class exist?

More related errors