追加循環迭代到html

Question

我有一個for循環，它遍歷一些JSON併爲每個迭代輸出三個不同的值。從我讀過的內容來看，最好不要在for循環中進行追加操作，而是最好將值保存到數組中並將其追加到循環外部。

我的問題是，如果我有三個包含我的值的數組，請說出書名，作者和URL - 我將如何追加這些以便它們如下所示？而不是三個單獨的所有值的列表。

Book Title 
Author 
URL 

Book Title 
Author 
URL 

Answer 1

你總是可以創建一個documentFragment：

var data = ['1', '2', '3', '4']; 
// Create empty fragment 
var fragment = document.createDocumentFragment(); 
// My iteration that will append items to the fragment 
for (var i = 0; i < data.length; i++) { 
    var item = document.createElement('span'); 
    item.appendChild(document.createTextNode(data[i])); 
    fragment.appendChild(item); 
} 
// After my iteration i will append my fragment 
// to the place in the page I want my newly created items to appear. 
document.body.appendChild(fragment); 

Answer 2

如果所有三個數組的長度相同：

var titles = ['Title 1', 'Title 2', 'Title 3'], 
    authors = ['Author 1', 'Author 2', 'Author 3'], 
    urls = ['URL 1', 'URL 2', 'URL 3'], 
    fragment = document.createDocumentFragment(); 

for (var i = 0, len = titles.length; i < len; i++) { 

    var title = document.createTextNode(titles[i]), 
     author = document.createTextNode(authors[i]), 
     titleEl = document.createElement('h1'), 
     authorEl = document.createElement('h2'); 

    titleEl.appendChild(title); 
    authorEl.appendChild(author); 

    fragment.appendChild(titleEl); 
    fragment.appendChild(authorEl); 

    if (urls[i]) { 
     var url = document.createTextNode(urls[i]), 
      urlEl = document.createElement('p'); 
     urlEl.appendChild(url); 
     fragment.appendChild(urlEl); 
    } 

} 

document.body.appendChild(fragment)