<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');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.