Rendering data from array to HTMLtable element using javascript

Sample javascript code that renders data into table element

let students = [
    { id: 1, student_name: "Son Goku", username : "songoku" , password : "123456"},
    { id: 2, student_name: "Son Gohan", username : "gohan" , password : "123456"},
    { id: 3, student_name: "Vegeta", username : "vegeta" , password : "123456"},
  ];
  
function renderStudentList(){
    let table = document.getElementById('student_list');
    let tbody = table.querySelector('tbody');
    tbody.innerHTML = "";
    students.forEach(function(student,index){
      
      let tr = '<tr>';
          tr +='<td>'+student.id+'</td>';
          tr +='<td>'+student.student_name+'</td>';
          tr +='<td>'+student.username+'</td>';
          tr +='<td>'+student.password+'</td>';
          tr +='<td><button onclick="editStudent('+index+')">Edit</button></td>';
          tr +='<td><button onclick="deleteStudent('+index+')">Delete</button></td>';
          tr += '</tr>';

          tbody.innerHTML += tr;
    });
}

document.addEventListener("DOMContentLoaded", function() {
    // Code to execute when the document is ready
    renderStudentList();
});