Javascript 显示学校类对象属性中的所有学生数据

我想显示来自“学生”的所有学生数据，这是属于学校类的对象数组

我已经创建了school类的一个新实例和一个forEach循环，它接受每个小学生对象，并使用document.getElementById.innerHTML在段落文本中显示对象的每个属性

class School {
constructor(name, level, pupils) {
   this.name = name;
       this.level = level;
       this.pupils = pupils;
    }
}


let pupils = [
{
   name: 'John Doe',
   age: 17,
   grades: {
     'English': 9,
     'Maths': 9,
     'Sociology': 'A*'
     },
   attendance: 45
},
{
  name: 'Jane Doe',
  age: 17,
  grades: {
     'English': 7,
     'Maths': 6,
     'Sociology': 'B'
     },
   attendance: 93
}
];

const myschool = new School('My School', 'high', pupils);

myschool.pupils.forEach(function(pupil) {
document.getElementById('pupils').innerHTML = `<h2>${pupil.name} 
    </h2><p>Age: ${pupil.age}</p><p>Attendance: ${pupil.attendance} 
    </p>`;
});

HTML:

我的代码只正确显示一个学生Jane Doe。它应该同时显示两者

<div id='pupils'>
<p>
Jane Doe
Age: 17

Attendance: 93
</p>
</div>

您每次都会重置innerHTML-innerHTML=删除所有以前的内容，因此您只会得到最后一个学生。使用+=添加新的HTML：

document.getElementById('pupils').innerHTML += `<h2>${pupil.name} 
</h2><p>Age: ${pupil.age}</p><p>Attendance: ${pupil.attendance} 
</p>`;

document.getElementById('pupils').innerHTML += `<h2>${pupil.name} 
</h2><p>Age: ${pupil.age}</p><p>Attendance: ${pupil.attendance} 
</p>`;