以編程方式創建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

回答

相關問題