将 div 附加到对象时，会出现 [object, Object] 而不是实际输入答案

【问题标题】：When appending div with an object, [object, Object] appears and not the actual input将 div 附加到对象时，会出现 [object, Object] 而不是实际输入
【发布时间】：2019-09-09 16:39:32
【问题描述】：

我有一个 for of 循环，它在下拉菜单中的链接上有 3 个事件侦听器。第一个清除 id 为 'kittyBox' 的 div，第二个向 div 'kittyBox' 添加一个对象，第三个关闭菜单。

我的问题是，出现的不是对象的实际输入，而是 [object, Object]。如何让实际输入出现？

let kittyBox = document.getElementById('kittyBox')

function clearContainer() { kittyBox.innerHTML = '' }

function addBoo() { kittyBox.append(boo) }

class Cat {
  constructor(name, source) {
    this.box = document.createElement('div');
    kittyBox.append(this.box);
    this.header = document.createElement('h1');
    this.header.innerHTML = name;
    this.photo = new Image(400, 400);
    this.photo.src = source;
    this.count = document.createElement('span');
    this.box.append(this.header, this.photo);
    this.header.append(this.count);
    this.photo.onclick = counter;
    function counter() {
      score++;
      document.querySelector('span').textContent = ` ` + score;
    }
  }
}

let boo = new Cat('Boo', './img/boo.jpg')

for (let link of links) {
   link.addEventListener('click', clearContainer)
   link.addEventListener('click', () => { if (links[0]) { addBoo() } }
   link.addEventListener('click', () => menu.classList.toggle('slide-menu'))

我希望 boo(div, h1, and image) 出现。

【问题讨论】：

据我所知，您必须附加boo.box。（由于boo 不是HTMLElement，浏览器在其上调用.toString()，结果为[object Object]）
另外，使用appendChild 而不是append 允许运行时为您捕获此类错误！例如：“未捕获的 TypeError：无法在 'Node' 上执行 'appendChild'：参数 1 不是 'Node' 类型。”

标签： javascript javascript-objects

【解决方案1】：

append() 方法插入一组Node 对象或DOMString 对象。在您的情况下，您必须创建对象的 HTML 元素。然后将新创建的 HTML 元素附加到 kittyBox 元素。

例如：

const catElem = document.createElement("div");
const catImg = document.createElement("img");
catImg.src = boo.photo.src;
catElem.append(catImg);
kittyBox.append(catElem);

【讨论】：