如何使已经使用过的模板重新出现在 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>

如何使已经使用过的模板重新出现在 HTML

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

html

javascript

templates