<template id="quote-template">
<p class="quote"></p>  -<cite class="author"></cite>
</template>
  
<div id="quotes"></div>
'use strict';
const quotes = [
  { quote: 'The greatest glory in living lies not in never falling, but in rising every time we fall.', author: 'Nelson Mandela' },
  { quote: 'The way to get started is to quit talking and begin doing.', author: 'Walt Disney' },
  { quote: 'Life is what happens when you\'re busy making other plans.', author: 'John Lennon' }
];

function appendQuotes(templateId) {
  const quoteList = document.getElementById('quotes');
  const fragment = document.getElementById(templateId);
  quoteList.innerHTML = '';
  
  quotes.forEach(quote => {
    const instance = document.importNode(fragment.content, true);
    instance.querySelector('.quote').innerHTML = '"'+quote.quote+'"';
    instance.querySelector('.author').innerHTML = quote.author;
    quoteList.appendChild(instance);
  });  
}
 
appendQuotes('quote-template');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.