How to change elements inner html?

<!--<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<script src=""></script>
  var quotes = ["don't hesistate!",
              "think preemptively",
              "Bob Saget is supreme",
              "bifurcation is the key" ];
  $("document").ready( function() {
    //$("#quote-field").html = "DICK";
    $("#new-quote").on("click", function() {
      var rand = Math.floor(Math.random() * quotes.length);
      //$(".quote-text").html = quotes[rand];
      document.getElementById("qt").innerHtml = quotes[rand];   });

<div class="quote-box">
<div id = "qt" class="quote-text">
  <div class="buttons">
    <button class="button" id="new-quote">gen</button

<div class="footer">  <a href="" target="_blank">mai profile</a></div>

the problem is that neither jquery or standalone javascript is functioning as it pertains to changing the specified elements text, as such i cannot complete the project

First, check your browser’s console for errors. Then, try moving the script tag below the rest of your markup.

Maybe not enough ’
Here… document.getElementById(“qt”).innerHtml = ‘quotes[rand]’