Javascript 以编程方式创建DOM

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

我已经创建了div模板。里面有许多div和bootstrap类

 <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中还有与根div的唯一id关联的按钮。这些按钮具有注释功能。当按钮为onclick时，文章id（unique）将发送到API，从而显示相应的注释

提前感谢。

尝试使用允许嵌入表达式并用背面勾号（

`

）括起来的

我不确定您的JSON/对象结构。请看下面使用

模板文本的示例代码

示例

var arr=[{id:1，作者：'author1'，图像：'image 1'}，{id:2，作者：'author2'，图像：'image 2'}，{id:3，作者：'author3'，图像：'image 3'}]；
var htmlData=''；
对于（var i=0；iDid）您是否尝试使用任何javascript框架或其他方法？您是否也可以共享该信息..谢谢！成功了