Question

我正在创建流行的javascript框架之间的比较，并且需要为从api返回的每个对象创建一个HTML元素。

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

为简单起见，我只有一个对象数组（为便于阅读，对它进行了简化）。

我有一个遍历此数组的函数，现在它只是将框架的名称打印到控制台。如果我想为循环中的每个项目创建此HTML元素（只是一张引导卡），那么最好的方法是什么？

frameworks.forEach(fw => {
    console.log(fw);
  });

只是一个非常简单的forEach函数。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

我正在尝试在普通JS中执行此操作，否则我将只使用React。这似乎有点麻烦。最好的方法是使用createElement()函数将其作为模板进行支撑吗？

Answer 1

对于普通javascript：

<div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div>

Answer 2

如果您不必添加任何事件侦听器，建议您使用insertAdjacentHTML()：

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

frameworks.forEach( framework => 
  document.body.insertAdjacentHTML("beforeend", 
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${framework.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`))

Answer 3

我建议您使用reduce而不是forEach。
准备HTML作为字符串，然后更新父元素的innerHTML。这将比一张一张地添加卡片要快得多。

请参见下面的代码段

const frameworks = [{
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

document.querySelector('.content')
  .innerHTML = frameworks.reduce((a, fw) => a +=
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${fw.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`, ''
);

.content {
  display: flex;
  flex-flow: row wrap;
}

.card {
  margin: .5rem;
  padding: 1rem;
  background: #fec
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content"></div>

希望有帮助。

循环数组中的对象以创建元素

3 个答案: