How to loop array list to a html tag?

I don't know how to make a loop of an array list to a html tag
Example :
we have a list : studentList
with Student object have these field : name, class

I want to make a loop on tag like

<div class="student">
<span>John</span>
<span>10HC</span>
</div>
<div class="student">
<span>Robin</span>
<span>10HC</span>
</div>
For example if below is the array of student

var studentList = [{
"name": "John",
"class": "10 HC"
}, {
"name": "Robin",
"class": "10 HC"
}, {
"name": "James",
"class": "10 HC"
}, {
"name": "Johny",
"class": "10 HC"
}, {
"name": "Patrick",
"class": "10 HC"
}]

var studentListLength = studentList.length;
var htmlValue = "";
for(var i=0;i<studentListLength;i++){
htmlValue += '<div class="student"> <span>'+studentList.name+'</span> <span>'+studentList.class+'</span></div>'
}

If there is parent div with id 'studentlist' then the html generated can be appended to the div using below code. This should be written after for loop

$("#studentlist").append(htmlValue);