以编程方式创建 DOM

Question

调用 API 后，我可以得到一个数据数组。 例如，我可以得到一个对象列表，每个对象包含 1 个唯一 ID、1 个作者、1 篇文章、1 张图片......等。

我已经创建了div 模板。里面有很多div 和引导类。

<div class="col-sm-4" id="test">
<div class="box" style="padding-bottom: 10px;">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<video class ="col-xs-12" controls>
<source src="../data.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="col-xs-12" style="margin-top: 10px;">
<div class="col-xs-12" style="margin-top: 5px">
<div class="avatar col-xs-2">
<img src="../data.jpg">
</div>
<div class="col-xs-6">
<p class="pull-left"> data(Author) </p>
</div>
<div class="col-xs-2"> 
<button>data</button>
</div>
<div class="col-xs-2" style="padding: 0"> 
<button>data</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

我想创建代表每个对象的 DOM，并使用引导和 css 设置它们的样式。如何将相应的数据放在上面模板的相应位置？

此外，根div 内还有一些按钮，这些按钮与唯一 id 与根div 相关联。按钮具有评论功能。当按钮被点击时，文章 ID(唯一(将被发送到 API，因此将显示相应的注释。

提前谢谢。

Answer 1

尝试使用允许嵌入表达式并用反引号括起来的Template literals(``(

我不确定您的 JSON/对象结构。查看下面的示例代码以使用Template literals

例

var arr = [{id: 1, author: 'author1', image: 'image 1'}, {id: 2, author: 'author2', image: 'image 2'}, {id: 3, author: 'author3', image: 'image 3'}];
var htmlData = '';
for(var i=0; i<arr.length; i++){
var data = arr[i];
htmlData += `
<div id="${data.id}">
<div>
${data.author} - ${data.image}
</div>

</div>
`
}
document.body.innerHTML = htmlData;