How to write jquery generated HTML directly into the actual text of the webpage

Question

I have a jQuery script that generates a HTML playlist for Youtube videos. The problem is I can't write the jQuery generated HTML into the page so the videos don't load or play.

I've created a string variable with the jQuery generated HTML and I want to insert that directly into the backend text of the webpage but can't figure it out. Thank you!

website: http://www.dreamsspace.io/Test/Bigroom/

<div id="video-list"><br>
  Trying to insert jquery generated html code here--<br>
</div>

javascript file (youtubeBigroom.js): Loop that generates the html

function resultsLoop(data) {
  $.each(data.items, function(i, item) {
    var thumb = item.snippet.thumbnails.medium.url;
    var title = item.snippet.title;
    var desc = item.snippet.description.substring(0, 100);
    var vid = item.snippet.resourceId.videoId;

    var strStr = `<div class="video-item" data-vidid="${vid}" data-imgurl="${thumb}" data-views="" data-likes="" data-date="2018-03-30T14:56:03.000Z" data-permalink="videos/${vid}/index.html"><a class="vid-img-link lazy-load-bg" href="#"><span class="duration">3:35</span><span class="play-button"><i class="fa fa-play"></i></span></a><div class="vid-content"><a class="vid-title-link" href="#"><h3>${title}</h3></a><div class="vid-meta"><span class="view-count"></span><span class="time-ago">5 months Ago</span></div>
      <div class="vid-description">${desc}</div>
    </div>
  </div>`
    strStr2 = strStr2 + strStr;
    // Can't figure out which line of code will write strStr2 into the html file??
    $('#video-list').html(strStr2);