用javascript对象属性填充DOM元素模板

我是一个全新的会员，但不是一个新用户。我到处都在寻找答案，但运气不好。我的问题是：

我正在制作供学校使用的在线抽认卡。我制作了一张模板卡，并用CSS（细节未显示）进行了样式设计，然后将其放在flexbox容器中。然后我有一个单独的JS文件，其中我定义了flashcard详细信息，如下所示：

var card1={
类型：“军事”
名称：“F22”，
发动机：“涡轮风扇”，
翼展：“44”，
速度：“1500”
};
var card2={
类型：“商业”
姓名:"747",，
引擎：“劳斯莱斯”，
翼展：“211”，
速度：“570”
};
.flex容器{
显示器：flex；
柔性包装：包装；
}
.翻盖卡片{
背景色：透明；
宽度：300px；
最小宽度：200px；
高度：300px；
透视图：1000px；
利润率：10px自动；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
边框：3倍纯色灰色；
边界半径：5px；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#fff；
}
.把卡片翻回去{
背景色：#fff；
变换：旋转（180度）；
文本对齐：左对齐；
溢出：滚动；
}


名称


类型
发动机
翼展
速度

您创建模板的想法实际上很好。模板标记可以放置在html文件中，并且不会呈现

<template id="card">
   <div id="container">
     <div id="name"></div>
   </div>
</template>

更好的方法是将所有对象放在一个数组中，并在其中循环：

let cards = [
    {name:"F22"}, {name:"747"}
]

for(let c of cards) {
    createCard(c)
}

创建一个生成所需标记的帮助函数，并使用innerText设置各个节点的文本内容。@Terry感谢您的响应。很抱歉，我来自OOP/C世界，所以我对HTML和JS的语法不太熟悉。如何将每个属性与HTML卡片对象中的类相关联？我非常喜欢这个想法。但我遇到了一个问题；如果我将卡片html放在标记中，则内容不会呈现。但是，在标记内部可以很好地工作，尽管模板现在是可见的。有什么建议吗？这就是模板的全部想法。它不会呈现，它的存在只是为了让您可以使用
cloneNode
并获取模板内容的副本（使用
template.content
）。您可以使用
addChild（）
Awesome将该副本添加到DOM中！我发现我必须将卡片块包装在一个单独的模板标签中，而不是将其作为模板本身，它就像一个符咒。非常感谢！
let cards = [
    {name:"F22"}, {name:"747"}
]

for(let c of cards) {
    createCard(c)
}