我正在创建流行的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()
函数将其作为模板进行支撑吗?
答案 0 :(得分:0)
对于普通javascript:
<div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div>
答案 1 :(得分:0)
如果您不必添加任何事件侦听器,建议您使用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>`))
答案 2 :(得分:0)
我建议您使用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>
希望有帮助。