使用javascript创建多个元素

我有一个html元素树示例（如下），我想返回数据库中每个匹配的相关数据。 我是否需要创建5个给定元素并用javascript数据填充它们

我将运行一个循环，但这看起来会以性能为代价（为每个匹配创建所有元素树）。相反，我可以使用给定的元素（pic）用javascript填充它并将其放到dom上（x次）吗？如果可能怎么办

<!-- sample elem -->
<div class="col-12 col-md-4" style="display: none">
    <div class="card my-3 mx-1">
        <a href="#"><img src="" alt="img"></a>
        <div class="card-body">
            <div class="row">
                <div class="col-12 p-1">Country</div>
                <div class="col-3 p-1">State</div>
                <div class="col-4 p-1">City</div>
            </div>
        </div>
    </div>
</div>

国家
陈述
城市

对于15-20个元素和该标记本身，性能影响不是很大

然而，如果你能证明它是慢的，就要知道字符串是快的。因此，更快的方法是：

将标记模板存储为字符串

创建一个带有最终标记的字符串-它可以根据需要多次重复模板，显然是用该标记填充的

在目标节点中插入标记

下面是它的样子：

const products=[{title:'变速箱'}，{title:'驱动轴'}，{title:'火花塞'}]
常量myTemplate='{title}'
const finalMarkup=products.map（（{title}）=>myTemplate.replace（{title}'，title））
document.getElementId（'targetNode'）。innerHtml=finalMarkup

对于15-20个元素和该标记本身，性能影响不是很大

然而，如果你能证明它是慢的，就要知道字符串是快的。因此，更快的方法是：

将标记模板存储为字符串

创建一个带有最终标记的字符串-它可以根据需要多次重复模板，显然是用该标记填充的

在目标节点中插入标记

下面是它的样子：

const products=[{title:'变速箱'}，{title:'驱动轴'}，{title:'火花塞'}]
常量myTemplate='{title}'
const finalMarkup=products.map（（{title}）=>myTemplate.replace（{title}'，title））
document.getElementId（'targetNode'）。innerHtml=finalMarkup

进一步阐述我的评论：经常是重复将元素插入DOM树导致性能问题，因为每次插入新节点时文档都需要回流。您不必担心调用/调用

document.createElement（）

太多次：这是您最不关心的

因此，我建议您使用一个函数来创建整个示例元素。然后，您可以在循环的每次迭代中调用此函数来创建整个card元素，然后将其附加到文档片段中

伪代码：

function createCard() {
  // Create the entire `sample element` as you would call it
  const el = <something>;
  return el;
}

// Create new document fragment to hold all the nodes
// At this point, we are NOT injecting them into the DOM yet
const fragment = new DocumentFragment();

// Go through your data and create new card for each data point
for (let i = 0; i < 5; i++) {
    fragment.appendChild(createCard());
}

// Now this is when you insert the entire bulk of the content into the DOM
document.querySelector('#myInsertionTarget').appendChild(fragment);

函数createCard（）{
//创建整个“sample元素”，如您所说
常数el=；
返回el；
}
//创建新文档片段以保存所有节点
//此时，我们还没有将它们注入DOM
const fragment=new DocumentFragment（）；
//检查数据并为每个数据点创建新卡
for（设i=0；i<5；i++）{
appendChild（createCard（））；
}
//现在，将全部内容插入DOM
document.querySelector（“#myInsertionTarget”）.appendChild（片段）；

概念验证代码如下所示：

//因为我们要创建这么多的``元素
//它有助于将其逻辑进一步抽象为另一个函数
函数createDivElement（类、文本）{
const div=document.createElement（'div'）；
if（类.长度）
div.classList.add（…类）；
如果（文本）
div.innerText=文本；
返回div；
}
//只要你想创建一张新卡，就可以调用这个
功能创建卡（一）{
const colCountry=createDivElement（['col-12'，'p-1'，'Country'）；
const colState=createDivElement（['col-3'，'p-1'，'State'）；
const colCity=createDivElement（['col-4'，'p-1'，'City'）；
const row=createDivElement（['row']）；
世界其他地区（colCountry）；
行。appendChild（colState）；
世界其他地区（colCity）；
const cardBody=createDivElement（['card-body']）；
cardBody.appendChild（行）；
const image=document.createElement（'img'）；
image.alt='img'；
//概念验证图片源，你可以忽略这个！
image.src=`https://placehold.it/100x50?text=Image%20${i+1}`；
const imageLink=document.createElement（'a'）；
imageLink.href='#'；
appendChild（图像）；
const card=createDivElement（['card'，'my-3'，'mx-1']）；
卡片.附件子项（imageLink）；
卡片.附件子项（卡片体）；
const outer=createDivElement（['col-12'，'col-md-4']）；
//outer.style.display='none'；
外附子卡；
返回外部；
}
//创建新文档片段
const fragment=new DocumentFragment（）；
//在循环的每个迭代中，将新的card元素插入片段中
for（设i=0；i<5；i++）{
const el=createCard（i）；
片段。附加子片段（el）；
}
//生成整个元素集后
//然后可以将片段插入DOM（最后！）
document.querySelector（'#app'）.appendChild（片段）
进一步阐述我的评论：经常是重复将元素插入DOM树导致性能问题，因为每次插入新节点时文档都需要回流。您不必担心调用/调用
document.createElement（）
太多次：这是您最不关心的

因此，我建议您使用一个函数来创建整个示例元素。然后，您可以在循环的每次迭代中调用此函数来创建整个card元素，然后将其附加到文档片段中

伪代码：

function createCard() {
  // Create the entire `sample element` as you would call it
  const el = <something>;
  return el;
}

// Create new document fragment to hold all the nodes
// At this point, we are NOT injecting them into the DOM yet
const fragment = new DocumentFragment();

// Go through your data and create new card for each data point
for (let i = 0; i < 5; i++) {
    fragment.appendChild(createCard());
}

// Now this is when you insert the entire bulk of the content into the DOM
document.querySelector('#myInsertionTarget').appendChild(fragment);

函数createCard（）{
//创建整个“sample元素”，如您所说
常数el=；
返回el；
}
//创建新文档片段以保存所有节点
//在这一点上，我们并没有将它们注入到