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

Question

Basically adding a forEach loop to spit out my array right now while practicing using DOM. I get the error in my console log. In my html I have the ul class "pokemon-list", and an empty li with the class "list-item".. What exactly did I do wrong here?

//IIFE function
let pokemonRepository = (function () {
  //List of pokemon Array
  let pokemonList = [
    {
     name: 'Bulbasaur ',
     height: 2.4,
     types: ['Grass ', 'Poison']
   },
    {
     name: ' Charmander ',
     height: 2,
     types: 'Fire'
   },
    {
     name: ' Squirtle ',
     height: 1.8,
     types: 'Water'
   }
  ];
//adds pokemon to the pokedex
  function add(pokemon) {
    pokemonList.push(pokemon);
  }
  function getAll() {
    return pokemonList
  }
  return {
    add: add,
    getAll: getAll
  }
})();
// for each function to write pokemon and its name
  pokemonRepository.getAll().forEach(function(pokemon){
  let listContainer = document.querySelector('.pokemon-list');
  let listItem = document.createElement('li');
  let button = document.createElement('button');
  button.innerText = pokemonRepository.name
  button.classList.add('poke-button');
  button.appendChild(listContainer);
  button.appendChild(listItem)
});

I would just recommend using a normal for loop, because you're taking in the argument of 'pokemon' into your forEach loop's function, but it's not being used anywhere in the actual function. Also, the pokemonList should probably be a global variable. I assume it will be used in other functions too. — mstephen19, Oct 14 '21 at 01:41
Are you sure `button.appendChild(listContainer);` and `button.appendChild(listItem);` make sense? You put the container and the list item _inside_ the button, but never append the button itself. You also move the container every single iteration. `button.appendChild(listContainer);` does not clone elements. Did you mean `listContainer.appendChild(listItem);`? Where do you want to put the button? `
`s cannot contain ` — Sebastian Simon, Oct 14 '21 at 01:42
It's in the Title. Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' — ZAKSCH01, Oct 14 '21 at 01:45
For the ones wondering, from [this meta-post](https://meta.stackoverflow.com/questions/412253/i-gt-an-error-when-i-run-this-code-on-chrome-but-runs-fine-on-the-stack-overflow) it is clear that the actual issue OP was **currently** facing here was that they didn't got the element from the DOM as they expected. — Kaiido, Oct 14 '21 at 01:58

score 0 · Accepted Answer · answered Oct 14 '21 at 01:50

From what I understand you are trying to make a list of buttons, but from your code that is not what is happening. You are trying to embed a list inside a button.

<ul class="pokemon-list">

</ul>

<script>
//IIFE function
let pokemonRepository = (function () {
  //List of pokemon Array
  let pokemonList = [
    {
     name: 'Bulbasaur ',
     height: 2.4,
     types: ['Grass ', 'Poison']
   },
    {
     name: ' Charmander ',
     height: 2,
     types: 'Fire'
   },
    {
     name: ' Squirtle ',
     height: 1.8,
     types: 'Water'
   }
  ];
//adds pokemon to the pokedex
  function add(pokemon) {
    pokemonList.push(pokemon);
  }
  function getAll() {
    return pokemonList
  }
  return {
    add: add,
    getAll: getAll
  }
})();
// for each function to write pokemon and its name
  pokemonRepository.getAll().forEach(function(pokemon){
  let listContainer = document.querySelector('.pokemon-list');
  let listItem = document.createElement('li');
  let button = document.createElement('button');
  button.innerText = pokemon.name;
  button.classList.add('poke-button');
  listItem.appendChild(button);
  listContainer.appendChild(listItem);
});

I spotted some few things.

button.innerText = pokemonRepository.name should be pokemon.name
You are appending listContainer and listItem to the button so change the followings.

button.appendChild(listContainer); button.appendChild(listItem)

to

listItem.appendChild(button); listContainer.appendChild(listItem);

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

1 Answers1