Getting JSON data in JavaScript

Question

I am trying to build a random quote machine. I have an API and I am struggling passing JSON data to my HTML. If I follow an API link I am getting the needed JSON, but for some reason it's not being passed to HTML.

function ran_col() {
  let color = '#'; // hexadecimal starting symbol
  let letters = ['b3cffc', 'b3fcd2', 'fcfbb3', 'fcc3b3', 'c5b3fc', 'b3c3fc', 'b3fcdb', 'b5fcb3']; //Set your colors here
  color += letters[Math.floor(Math.random() * letters.length)];
  document.getElementsByTagName('BODY')[0].style.background = color; // Setting the random color on your div element.
}

function getQuote() {

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(data) {

    document.getElementById('text').innerHTML = JSON.stringify(data);

  });
}

window.onload = function() {
  ran_col();
  getQuote();
}

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html,
body,
.container-table {
  height: 100%;
}
.container-table {
  display: table;
}
.vertical-center-row {
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container container-table">
  <div class="row vertical-center-row">
    <blockquote class="blockquote-reverse">
      <div id="text">TEXT</div>
      <footer><cite>Author</cite>
      </footer>
    </blockquote>
  </div>
</div>