javascripthtmlcsstemplatesclonenode

element.appendChild(TemplateNodeCloned) does not append

So here i come, I have a template which has a div child, with some other childs inside the div. what i want here is to take the template content change it's values and then append the changed copy to the section; i'll show u the structure, i know its not fully perfect cause i've been doing some tests before ask here.

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>
enter image description here

Solution 
  •    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);

    the hole problem was about how to handle the documentFragment i should have useddocument.body.appendChild(clonProd.content); in order to import the content not the fragment.