<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<template id="book-template-2">
  <li><span class="author"></span>'s classic novel <span class="title"></span></li>
</template>

<ul id="books"></ul>

<fieldset id="templates">
  <legend>Choose template</legend>
  
  <label>
    <input type="radio" name="template" value="book-template" checked> Template One
  </label>
  <label>
    <input type="radio" name="template" value="book-template-2"> Template Two
  </label>
</fieldset>
label {
  display: block;
  margin-bottom: 0.5rem;
}
'use strict';

const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
  { title: 'Catch 22', author: 'Joseph Heller' }
];

function appendBooks(templateId) {
  const booksList = document.getElementById('books');
  const fragment = document.getElementById(templateId);
  
  // Clear out the content from the ul
  booksList.innerHTML = '';
  
  // Loop over the books and modify the given template
  books.forEach(book => {
    // Create an instance of the template content
    const instance = document.importNode(fragment.content, true);
    // Add relevant content to the template
    instance.querySelector('.title').innerHTML = book.title;
    instance.querySelector('.author').innerHTML = book.author;
    // Append the instance ot the DOM
    booksList.appendChild(instance);
  });  
}


document.getElementById('templates').addEventListener('change', (event) => appendBooks(event.target.value));

appendBooks('book-template');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.