renderInElement and toHTML method confuse

function Song(title, artist, duration) { //when create a function there is 2 object 1 is the Song 2nd is the prototype object
this.title = title; // a
this.artist = artist; // a
this.duration = duration; // a
this.isPlaying = false; // set the boolean to false that will be a sensible default value
}

Song.prototype.play = function() { // to acess the prototype - Song.prototype
  this.isPlaying = true;
};

Song.prototype.stop = function() {
  this.isPlaying = false;
};

Song.prototype.toHTML = function() { // n
  var htmlString = '<li';
  if(this.isPlaying) {
    htmlString += ' class="current"';
  }
  htmlString += '>';
  htmlString += this.title;
  htmlString += ' - '
  htmlString += this.artist;
  htmlString += '<span class="duration">'
  htmlString += this.duration;
  htmlString += '</span></li>';
  return htmlString;
};

function Playlist() {
  this.songs = []; // create an empty array for the playlist
  this.nowPlayingIndex = 0;
}

Playlist.prototype.add = function(song) { // e
  this.songs.push(song); // ascess the array with this.song // and add a new song with the push method
};

Playlist.prototype.play = function() {
  var currentSong = this.songs[this.nowPlayingIndex]; // a // to acess the current song from the array we need to pass the nowPlayingIndex
  currentSong.play(); // a // so when it play on the current playlist it will play on the current song // and when we stop the current playlist it will stop at the current song
};

Playlist.prototype.stop = function(){
  var currentSong = this.songs[this.nowPlayingIndex]; // a
  currentSong.stop(); // a
};

Playlist.prototype.next = function() { // z
  this.stop(); // stop the current song first
  this.nowPlayingIndex++; // using the increment method ++ to move along to the next song
  if(this.nowPlayingIndex === this.songs.length) { // if its equal to the song of the array we know that it has gone pass the array
  this.nowPlayingIndex = 0; // so we have to set it back to 0
}
  this.play();
};

Playlist.prototype.renderInElement = function(list) { // in the renderInElement method we can pass the variable or parameter of (list) meaning the order list from appjs
  list.innerHTML = ""; // then we can enter the list by setting the innerHTML to the empty string
  for(var i = 0; i < this.songs.length; i++) { // lets cycle over each song
    list.innerHTML += this.songs[i].toHTML(); // And then we want to add the songs HTML to the inner HTML of the list,and we can do that by doing list.innerhtml.And then we can use the += operator and this will add each of the songs HTML.
  }
}; // v

var playlist = new Playlist();

var hereComesTheSun = new Song("Here comes the Sun", "The Beatles", "2.54");
var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the Waves", "3.43");

playlist.add(hereComesTheSun);
playlist.add(walkingOnSunshine);

var playlistElement = document.getElementById("playlist"); // get the order list with getElementById method

playlist.renderInElement(playlistElement); // we can then pass this playlistElement to renderInElement method

var playButton = document.getElementById("play"); // o
playButton.onclick = function() { // p
  playlist.play(); // p
  playlist.renderInElement(playlistElement); // l // Because each one of these methods, play, stop, and next, alters the state of the objects, we need to refresh the UI.To do that we call the rendering element method on the playlist and pass the playlist element again.
}
var nextButton = document.getElementById("next"); // o
nextButton.onclick = function() { // p
  playlist.next(); // p
  playlist.renderInElement(playlistElement); // l
}
var stopButton = document.getElementById("stop"); // o
stopButton.onclick = function() { // p
  playlist.stop(); // p
  playlist.renderInElement(playlistElement); // l
}