element.appendChild(TemplateNodeCloned) 不追加

Question

所以我来了，我有一个模板，其中有一个 div 子项，div 中还有一些其他子项。我在这里想要的是将模板内容更改为值，然后将更改后的副本附加到该部分；我会告诉你结构，我知道它并不完全完美，因为我在问这里之前已经做了一些测试。

if ('content' in document.createElement('template')){
  
  let article = document.querySelector("article");
  let templateProd = document.getElementById("templateProducts");
  
  templateProd.content.querySelector(".nombre").textContent="nameTest";
  templateProd.content.querySelector(".category").textContent = "categoryTest";
  //templateProd.querySelector(".totalPrice").textContent = totalPrice();
  //templateProd.querySelector(".tags").textContent = tagsLoad();
  templateProd.content.querySelector("img").src = "none";
  templateProd.content.querySelector(".itemPrice").textContent = 102;
  templateProd.content.querySelector(".quantityNumber").textContent = 0);
  
  let clonProd = document.importNode(templateProd,true); 
  article.appendChild(clonProd);



}

p, img, div, button {
  margin: 0;
  font-size: 2rem;
}

.contenedorProducto {
  margin: auto;
  margin-top: 0.5rem;
  padding: 0;
  width: 100%;
  height: auto;
  display: grid;
  background: linear-gradient(45deg, beige, cyan);
  border-radius: 1em;
  overflow: hidden;
  border: 3px solid green;
  grid-template-areas: "img  nombre  nombre category category " "img  tag   tag   plusminus    price" "img  tag   tag  total   add";
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.7fr 0.7fr 0.7fr;
}
.contenedorProducto img {
  grid-area: img;
  align-self: center;
  justify-self: center;
  width: 32px;
  height: 32px;
  border: 2px solid brown;
}
.contenedorProducto .nombre {
  border: 2px solid violet;
  grid-area: nombre;
}
.contenedorProducto .category {
  border: 2px solid brown;
  grid-area: category;
}
.contenedorProducto .totalPrice {
  border: 2px solid blue;
  grid-area: total;
}
.contenedorProducto .tags {
  border: 3px solid green;
}
.contenedorProducto .addButton {
  grid-area: add;
}
.contenedorProducto .addButton img {
  width: 10px;
  height: auto;
}
.contenedorProducto .itemPrice {
  margin: auto;
  grid-area: price;
  border: 1px solid black;
}
.contenedorProducto .quantityDiv {
  grid-area: plusminus;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.contenedorProducto .quantityDiv .minusQuantity, .contenedorProducto .quantityDiv .plusQuantity {
  margin: 1rem;
  box-shadow: 0px 0px 20px 0px #007bff;
  background-color: transparent;
  border-radius: 36px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: "Courier New";
  font-size: 2rem;
  padding: 0.3rem 0.8rem;
  text-decoration: none;
  text-shadow: 0px 1px 0px #08122b;
}
.contenedorProducto .quantityDiv .minusQuantity:hover, .contenedorProducto .quantityDiv .plusQuantity:hover {
  background-color: transparent;
}
.contenedorProducto .quantityDiv .minusQuantity:active, .contenedorProducto .quantityDiv .plusQuantity:active {
  position: relative;
  top: 1px;
}
.contenedorProducto .quantityDiv .quantityNumber {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

<template id="templateProducts">
    <div class="contenedorProducto">
      <img src="assets/cart.png">
      <p class="nombre"></p>
      <p class="category"></p>
      <p class="totalPrice"></p>
      <div class="tags"></div>
      <button class="addButton" onclick="añadeCompra()"></button>
      <div class="quantityDiv">
        <button  class="minusQuantity" onclick="minusQuantity()" value="-">-</button>
        <p class="quantityNumber"></p>
        <button class="plusQuantity" onclick="plusQuantity()" value="+">+</button>
      </div>
      <p class="itemPrice">104</p>
    </div>
  </template>
  
  <article class="cart"> <!--whatever tag u need doesn't mind if it changes-->
  </article>

Answer 1

   let templateProd = document.getElementById("templateProducts");
  templateProd.content.querySelector(".nombre").textContent=JSONArray[0].name;
  templateProd.content.querySelector(".category").textContent = JSONArray[0].category;
  templateProd.querySelector(".totalPrice").textContent = totalPrice();
  templateProd.querySelector(".tags").textContent = tagsLoad();
  templateProd.content.querySelector("img").src = JSONArray[0].picture;
  templateProd.content.querySelector(".itemPrice").textContent = JSONArray[0].price;
  templateProd.content.querySelector(".quantityNumber").textContent = toString(amount);
  let clonProd = document.importNode(templateProd,true);
  window.alert("hola");
  document.body.appendChild(clonProd.content);

问题是关于如何处理我应该使用的 documentFragmentdocument.body.appendChild(clonProd.content); 以便导入内容而不是片段。

element.appendChild(TemplateNodeCloned) 不追加

element.appendChild(TemplateNodeCloned) does not append

html

javascript

css

templates

clonenode