JavaScript实现从文本框添加无限条数据到对象并列表展示的方案

你可以用数组存储所有生成的Car类实例，配合简单的表单输入和DOM渲染即可实现需求，完整可直接运行的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>车辆信息录入</title>
</head>
<body>
  <!-- 输入区域 -->
  <div>
    <input type="text" id="carName" placeholder="请输入车辆品牌">
    <input type="number" id="carYear" placeholder="请输入生产年份">
    <button id="addBtn">添加车辆</button>
  </div>
  <!-- 列表展示区域 -->
  <h3>已录入车辆列表</h3>
  <ul id="carListContainer"></ul>

  <script>
    // 你提供的基础Car类定义
    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
    }

    // 存储所有车辆实例的数组，无长度限制
    const carList = [];
    // 绑定DOM元素
    const nameInput = document.getElementById('carName');
    const yearInput = document.getElementById('carYear');
    const addBtn = document.getElementById('addBtn');
    const listContainer = document.getElementById('carListContainer');

    // 添加按钮点击事件
    addBtn.addEventListener('click', () => {
      const name = nameInput.value.trim();
      const year = yearInput.value.trim();
      // 简单校验输入合法性
      if (!name || !year) return alert('请补全车辆品牌和年份信息');
      
      // 实例化Car并推入数组
      carList.push(new Car(name, year));
      // 清空输入框方便下次输入
      nameInput.value = '';
      yearInput.value = '';
      // 重新渲染全量列表
      renderCarList();
    })

    // 渲染车辆列表方法
    function renderCarList() {
      // 先清空原有列表
      listContainer.innerHTML = '';
      // 遍历所有车辆实例生成列表项
      carList.forEach(car => {
        const li = document.createElement('li');
        li.textContent = `${car.name}, ${car.year}`;
        listContainer.appendChild(li);
      })
    }
  </script>
</body>
</html>

把上述代码保存为HTML文件直接在浏览器打开即可使用，核心实现逻辑：

• 用数组存储所有Car类的实例，天然支持无限扩容，没有条数限制
• 每次新增数据后直接清空原有渲染内容，遍历数组重新生成全量列表，保证展示的是所有已添加的数据
• 增加了基础输入校验，避免空数据录入

内容的提问来源于stack exchange，提问作者Chris Van Gewden