以编程方式创建 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，并使用引导程序和 css 设置它们的样式。如何将对应的数据放在上面模板对应的地方？

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

提前致谢。

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;