时间戳

首页 > 解决方案 > 使用 javascript 创建多个元素

javascript - 使用 javascript 创建多个元素

问题描述

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

我要运行一个循环，但这看起来会耗费性能（为每个匹配创建所有元素树）。相反，我可以使用给定的元素（图片）用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>

标签： javascriptajaxcreateelement

解决方案

对于 15-20 个元素和单独的标记，性能影响并不大。

但是，如果您可以证明它很慢，请知道字符串更快。所以一个更快的方法是这样的：

  1. 将标记模板存储为字符串
  2. 使用最终标记创建一个字符串 - 它可以根据需要多次重复模板，显然充满了
  3. 在目标节点中插入标记

下面是它的样子：

const products = [{ title: 'gearbox' }, { title: 'drive shaft' }, { title: 'spark plug'}]
const myTemplate = '<div class="product">{title}</div>'
const finalMarkup = products.map(({ title }) => myTemplate.replace('{title}', title))

document.getElementId('targetNode').innerHtml = finalMarkup

推荐阅读