How to make a template already used re-appear in the HTML-CodePudding

So I'm trying to reset it after it disappears from the screen with a button. I tried a document.write() but it doesn't work, So I try that after being used, to rewrite my template argue in my HTML so I can use it again with other datas. Is that even possible? This is my HTML:

<template id="playlist__screen">
  <button  onclick="onClick()"></button>
  <p >{{style}}</p>
  <h2 class='playlist__titre'>{{titre}}</h2>
  <p >{{description}}</p>
</template>

CodePudding user response：

Here is how you use a template

const plays = [{
    "style": "Style 1",
    "titre": "Titre 1",
    "description": "Description 1"
  },
  {
    "style": "Style 2",
    "titre": "Titre 2",
    "description": "Description 2"
  },
  {
    "style": "Style 3",
    "titre": "Titre 3",
    "description": "Description 3"
  }
];
window.addEventListener("DOMContentLoaded", function() {
  const template = document.getElementById("template"),
    content = document.getElementById("content");
  plays.forEach(play => {
    const playList = template.content.cloneNode(true);
    playList.querySelector(".playlist__type").textContent = play.style;
    playList.querySelector(".playlist__titre").textContent = play.Titre;
    playList.querySelector(".playlist__desc").textContent = play.description;
    content.appendChild(playList);
  })
  content.addEventListener("click", function(e) {
    if (e.target.classList.contains("backbutton")) {
      console.log("back clicked");
    }
  })
});

<div id="content"></div>
<template id="template"> 
  <div >
    <button >Back</button>
    <p ></p>
    <h2 ></h2>
    <p ></p>
  </div>
</template>