以编程方式创建DOM

-4

调用API后，我可以获得一组数据。例如，我可以得到一个对象列表，每个对象包含1个唯一的id，1个作者，1个文章，1个图片等等。以编程方式创建DOM

我已经创建了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中还有与唯一id和根div相关联的按钮。按钮具有评论功能。当按钮点击时，文章ID（唯一）将被发送到API，因此相应的评论将被显示。

在此先感谢。

来源

2017-07-27 tak

您是否尝试过与任何JavaScript框架或呢？你能分享这些信息吗.. – SilentCoder

尝试使用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;

来源

2017-07-27 10:40:50

谢谢！有效 – tak

以编程方式创建DOM

回答

相关问题