以编程方式创建DOM

Question

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

我已经创建了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，并使用bootstrap和css对它们进行样式化。如何将相应的数据放在上面模板的相应位置？

此外，根div中的按钮与根div的唯一ID相关联。按钮具有注释功能。当按钮被点击时，文章ID（唯一）将被发送到API，因此将显示相应的注释。

提前致谢。

Answer 1

尝试使用允许嵌入式表达式的Template literals并用后面的勾号（``）

包围

我不确定你的JSON / Object结构。请查看以下示例代码以使用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;