L'utilizzo di un template è una pratica comune in tutti i framework SPA: creando una parte di codice, essa può essere replicata e riutilizzata all'interno di una o più sezioni della pagina. La medesima pratica può essere utilizzata anche all'interno di una normale pagina html utilizzando il tag template e poche righe JavaScript.

Iniziamo dal definire un template, una sezione in cui inserire il template e un bottone che utilizzeremo per eseguire il codice JavaScript.

<template id="my-template">
    <p>questo è un template</p>
</template>

<button type="button" onclick="insertTemplate()">Insert</button>
<div class="container">
   
</div>

È importante ricordare che nulla di quello inserito all'interno del tag template verrà mostrato a video, potremmo dunque inserirlo nella sezione di pagina più comoda per noi.

Passiamo ora ai metodi che ci permetteranno di inserirlo in un punto a nostra scelta: partendo dal template stesso, ne creiamo una copia, in modo che la versione originale rimanga inalterata per un possibile utilizzo futuro, e lo inseriamo all'interno del contenitore.

function insertTemplate() {
  const template = document.getElementById("my-template");
  const clone = template.content.cloneNode(true);
  document.querySelector('.container').appendChild(clone);
  // se non volessi che ad un secondo click mi inserisca un altro template
  template.innerHTML = "";
}