javascript - 将循环迭代附加到 html

Question

我有一个 for in 循环，它遍历一些 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);