Adding link on list to show its data

On my web app, every time a user create a classroom the data will be save to the firebase database and then will be retrieve and sent under the Classroom: as shown on the image.

Now, how do I add or make a link on the list so that when I click a particular classroom it will show me its information like Class name, the Teacher who created it, the students, etc.

Here's my code:

function classcreation(q) {
var usuid = generateId();
var myClasses={};
myClasses.TheClass = document.getElementById('classroomName').value;
myClasses.Teacher = user.displayName;
myClasses.TeacherID = user.uid;
myClasses.ClassID = usuid;
fbclass.child(user.uid).push().set(myClasses);
 }
}

Retrieving the data from the database firebase and then send it to the list

var userRef = firebase.database().ref().child('Classes' + '/' + user.uid);
userRef.on('child_added', function(data) {

var roomNames = data.val().TheClass;

var ul = document.createElement('ul');
document.getElementById('myList').appendChild(ul);

var li = document.createElement('li');
ul.appendChild(li);
Object.keys(roomNames).forEach(function(key){
     li.innerHTML += roomNames[key].link(roomNames);

    });


});

The li.innerHTML += roomNames[key].link(roomNames); is not yet working, it will just redirect me to another html.

What do I need to add?