时间戳

首页 > 解决方案 > 无法在 'Node' 上执行 'appendChild'：参数 1 不是类型 'Node' 错误

javascript - 无法在 'Node' 上执行 'appendChild'：参数 1 不是类型 'Node' 错误

问题描述

基本上是在练习使用 DOM 时添加一个 forEach 循环来吐出我的数组。我在控制台日志中收到错误。在我的 html 中，我有 ul 类“pokemon-list”，以及一个带有“list-item”类的空 li。我到底做错了什么？

//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)
});

标签： javascripthtmlcss

解决方案

据我了解，您正在尝试制作按钮列表，但您的代码并非正在发生的事情。您正在尝试在按钮中嵌入列表。

<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);
});

我发现了一些东西。

  1. button.innerText = pokemonRepository.name 应该是 pokemon.name
  2. 您将 listContainer 和 listItem 附加到按钮，因此更改以下内容。

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

至

listItem.appendChild(按钮); listContainer.appendChild(listItem);

推荐阅读