Javascript 元素。appendChild（TemplateNodeColoned）不追加

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

if（'content'在document.createElement（'template'）中）{
let article=document.querySelector（“article”）；
让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=“无”；
templateProd.content.querySelector（“.itemPrice”）.textContent=102；
templateProd.content.querySelector（“.quantityNumber”）.textContent=0）；
让clonProd=document.importNode（templateProd，true）；
第条.儿童（克隆罗德）；
}

p，img，div，按钮{
保证金：0；
字号：2rem；
}
康特多普罗托先生{
保证金：自动；
边缘顶部：0.5雷姆；
填充：0；
宽度：100%；
高度：自动；
显示：网格；
背景：线性梯度（45度，米色，青色）；
边界半径：1米；
溢出：隐藏；
边框：3倍纯绿；
网格模板区域：“img nombre nombre category category”“img标签plusminus price”“img标签总计添加”；
网格模板柱：1fr 1fr 1fr 1fr 1fr；
网格模板行：0.7fr 0.7fr 0.7fr；
}
.CONTEDEDORPRODUCTO img{
网格面积：img；
自对准：居中；
自我辩护：中心；
宽度：32px；
高度：32px；
边框：2倍纯色棕色；
}
.内容或产品名称{
边框：2倍纯紫色；
网格面积：nombre；
}
.内容或产品类别{
边框：2倍纯色棕色；
网格区域：类别；
}
.CONTEDEDORPRODUCTO.总价{
边框：2件纯蓝；
网格面积：总面积；
}
.contendorProducto.tags{
边框：3倍纯绿；
}
.contendorProducto.addButton{
网格区域：添加；
}
.contendorProducto.addButton img{
宽度：10px；
高度：自动；
}
.内容或产品项目价格{
保证金：自动；
网格面积：价格；
边框：1px纯黑；
}
.内容或产品数量div{
网格区域：plusminus；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.contendorproducto.quantityDiv.minusQuantity.contendorproducto.quantityDiv.plusQuantity{
保证金：1rem；
盒影：0px 0px 20px 0px#007bff；
背景色：透明；
边界半径：36px；
边框：1px实心#ffffff；
显示：内联块；
光标：指针；
字体系列：“信使新”；
字号：2rem；
填充：0.3雷姆0.8雷姆；
文字装饰：无；
文本阴影：0px 1px 0px#08122b；
}
.ContendorProducto.quantityDiv.Minus数量：悬停，.ContendorProducto.quantityDiv.plusQuantity:悬停{
背景色：透明；
}
.ContendorProducto.quantityDiv.minusQuantity:活动，.ContendorProducto.quantityDiv.plusQuantity:活动{
位置：相对位置；
顶部：1px；
}
.ContendorProducto.quantityDiv.quantityNumber{
宽度：2em；
高度：2em；
字号：2rem；
}

-

+
104

漏洞问题是关于如何处理我应该使用的documentFragment

document.body.appendChild（clonProd.content）以便导入内容而不是片段

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