Convert a JavaScript object to HTML

Question

i need to convert an JavaScript array to html and display it in a div element here my JS code

js

$(document).ready(function(){ 
  $("#getQuotes").on("click", function(){
    var index = Math.floor(Math.random() * (quotes.length));
    var html = "<h6> " + quotes[index].author + "</h6> <br>";
    html = "<h1>" + quotes[index].quote + "</h1>";

   $("#display").html(html);
  });
});

// Js object of some famous quotes
var quotes = [
    {
        "quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.",
        "author": "—Sherlock Holmes"
    },
    {
        "quote" : "You can do anything, but not everything.",
        "author" : "—David Allen"
    },
    {
        "quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.",
        "author" : "—Antoine de Saint-Exupéry"
    },
    {
        "quote" : "The richest man is not he who has the most, but he who needs the least.",
        "author" : "—Unknown Author"
    },
    {
        "quote" : "You miss 100 percent of the shots you never take.",
        "author" : "—Wayne Gretzky"
    },
    {
        "quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.",
        "author" : "—Ambrose Redmoon"
    },
    {
        "quote" : "You must be the change you wish to see in the world.",
        "author" : "—Gandhi"
    },
    {
        "quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.",
        "author" : "—Abraham Maslow"
    },
    {
        "quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.",
        "author" : "—Aristotle"
    },
    {
        "quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.",
        "author" : "—Basho"
    },
    {
        "quote" : "A wise man gets more use from his enemies than a fool from his friends.",
        "author" : "—Baltasar Gracian"
    },
    {
        "quote" : "Always forgive your enemies; nothing annoys them so much.",
        "author" : "—Oscar Wilde"
    }
  ];

Answer 1

Substitute += operator for = operator at last html assignment to concatenate "<h1>" + quotes[index].quote + "</h1>" instead of overwriting html variable

 $(document).ready(function(){ $("#getQuotes").on("click", function(){ var index = Math.floor(Math.random() * (quotes.length)); var html = "<h6> " + quotes[index].author + "</h6> <br>"; html += "<h1>" + quotes[index].quote + "</h1>"; $("#display").html(html); }); }); // Js object of some famous quotes var quotes = [ { "quote": "Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.", "author": "—Sherlock Holmes" }, { "quote" : "You can do anything, but not everything.", "author" : "—David Allen" }, { "quote" : "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.", "author" : "—Antoine de Saint-Exupéry" }, { "quote" : "The richest man is not he who has the most, but he who needs the least.", "author" : "—Unknown Author" }, { "quote" : "You miss 100 percent of the shots you never take.", "author" : "—Wayne Gretzky" }, { "quote" : " Courage is not the absence of fear, but rather the judgement that something else is more important than fear.", "author" : "—Ambrose Redmoon" }, { "quote" : "You must be the change you wish to see in the world.", "author" : "—Gandhi" }, { "quote" : " To the man who only has a hammer, everything he encounters begins to look like a nail.", "author" : "—Abraham Maslow" }, { "quote" : "We are what we repeatedly do; excellence, then, is not an act but a habit.", "author" : "—Aristotle" }, { "quote" : "Do not seek to follow in the footsteps of the men of old; seek what they sought.", "author" : "—Basho" }, { "quote" : "A wise man gets more use from his enemies than a fool from his friends.", "author" : "—Baltasar Gracian" }, { "quote" : "Always forgive your enemies; nothing annoys them so much.", "author" : "—Oscar Wilde" } ]; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="getQuotes">get quotes</div> <div id="display"></div> 

Answer 2

html code:

<button id="getQuotes">get quotes</button>
<div id="display"></div>

jqueryCode:

$(document).ready(function(){ 
  $("#getQuotes").on("click", function(){
    var index = Math.floor(Math.random() * (quotes.length));
    for(var i = 0; i<=index; i++){
     var html = "<h6> " + quotes[i].author + "</h6> <br>";
     html += "<h1>" + quotes[i].quote + "</h1>";
    }
   $("#display").html(html);
  });
});

You may try like this. https://jsfiddle.net/yu799cdz/