JS新手将类实例作为Node添加到div时遇TypeError错误求助

核心错误原因 #

你碰到的TypeError本质是两个问题导致的：

• elemImg、elemProp这类方法没有返回值（默认返回undefined），所以arr数组里的每一项都是undefined，用appendChild添加非Node类型的undefined必然报错。
• 你的elem()方法会直接把创建好的元素追加到document.body里，这和你想把元素放到自定义div中的需求完全冲突。

类设计的不合理之处 #

你的AddElement类存在几个明显的设计问题：

1. 构造函数里的this.name原本是元素标识名称，结果在elem()方法里被覆盖成了DOM元素，命名逻辑混乱。
2. 所有操作方法都直接把元素插入body，完全失去了控制元素父容器的灵活性。
3. 方法职责耦合严重，比如elemError直接写死错误文本，复用性极低。

修正后的代码实现 #

我们重构AddElement类，让它专注于元素的创建与配置，不直接操作页面插入，同时让实例持有创建好的DOM元素，方便后续灵活添加到指定容器：

class ElementCreator {
  constructor(tag) {
    this.element = document.createElement(tag); // 直接创建并保存DOM元素
  }

  // 设置文本内容
  setText(content) {
    this.element.textContent = content;
    return this; // 返回实例，支持链式调用
  }

  // 设置图片属性
  setImage(src, height = 150) {
    this.element.src = src;
    this.element.height = height;
    return this;
  }

  // 设置样式
  setStyle(styles) {
    Object.assign(this.element.style, styles);
    return this;
  }

  // 获取最终的DOM元素
  getElement() {
    return this.element;
  }
}

async function getJson(name) {
  let response = await fetch(`https://api.github.com/users/${name}`);
  
  if (response.status === 404) {
    // 创建错误提示元素并插入页面
    const errorEl = new ElementCreator('h3')
      .setText('User does not exist.')
      .setStyle({ color: 'red' })
      .getElement();
    document.body.appendChild(errorEl);
    throw new Error('User not found!');
  } else {
    let data = await response.json();
    return data;
  }
}

async function gitUserInfo(name) {
  let jsonData = await getJson(name);

  // 创建三个元素，此时元素未插入页面
  const imgEl = new ElementCreator('img')
    .setImage(jsonData.avatar_url)
    .getElement();
  const loginEl = new ElementCreator('h2')
    .setText(jsonData.login)
    .getElement();
  const bioEl = new ElementCreator('h3')
    .setText(jsonData.bio || 'No bio provided') // 处理bio为空的情况
    .getElement();
  
  // 创建容器div并添加所有元素
  const userDiv = document.createElement('div');
  userDiv.appendChild(imgEl);
  userDiv.appendChild(loginEl);
  userDiv.appendChild(bioEl);
  document.body.appendChild(userDiv);
}

let search = document.getElementById('searchUser');
search.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    gitUserInfo(search.value);
  } else if (search.value === '') {
    removeTag('h2');
    removeTag('h3');
    removeTag('img');
  }
});

function removeTag(tag) {
  // 修正getElementsByTagName的调用错误（缺少括号）
  const elements = document.getElementsByTagName(tag);
  // 从后往前删除，避免索引混乱
  for (let i = elements.length - 1; i >= 0; i--) {
    elements[i].remove();
  }
}

关键改进点 #

• 类名改为ElementCreator更贴合职责，彻底区分元素标识与DOM元素本身。
• 所有配置方法返回实例，支持链式调用，代码更简洁易读。
• 类只负责元素的创建与配置，不直接插入页面，由调用方决定元素的父容器，既符合DRY原则又提升了灵活性。
• 修复了removeTag函数中getElementsByTagName的调用错误，同时改为从后往前删除元素，避免删除过程中索引错位。

内容的提问来源于stack exchange，提问作者Yan Shtein