如何使模板已经在HTML中使用了重新出现

Question

所以我试图在它从屏幕上消失后用按钮重置它。我尝试了 document.write() 但它不起作用，所以我在使用后尝试在 HTML 中重写我的模板，这样我就可以再次将它与其他数据一起使用。这可能吗？ 这是我的 HTML：

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

Answer 1

以下是如何使用模板

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 class="playlist__screen">
    <button class="backbutton">Back</button>
    <p class="playlist__type"></p>
    <h2 class="playlist__titre"></h2>
    <p class="playlist__desc"></p>
  </div>
</template>